@agent-native/core 0.131.3 → 0.131.5

package/corpus/templates/design/.generated/bridge/editor-chrome.generated.ts

@@ -8199,7 +8199,7 @@ export const editorChromeBridgeScript: string = `"use strict";
       if (e.data.type === "agent-native:text-edit-status") {
         var textEditStatusCorrelationId = typeof e.data.correlationId === "string" ? e.data.correlationId : "";
         var textEditStatusNodeId = typeof e.data.nodeId === "string" ? e.data.nodeId : "";
-        var textEditStatus = false;
+        var textEditStatus = "missing";
         if (textEditStatusNodeId) {
           var escapedTextEditStatusNodeId = textEditStatusNodeId.replace(/\\\\/g, "\\\\\\\\").replace(/"/g, '\\\\"');
           var textEditStatusNode = document.querySelector(
@@ -8212,6 +8212,8 @@ export const editorChromeBridgeScript: string = `"use strict";
             textEditStatus = "active";
           } else if (textEditStatusNode && (textEditStatusNode.textContent ?? "").trim().length > 0) {
             textEditStatus = "done";
+          } else if (textEditStatusNode) {
+            textEditStatus = false;
           }
         }
         window.parent.postMessage(

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

@@ -1,6 +1,6 @@
 import { defineAction } from "@agent-native/core";
 import { resolveAccess } from "@agent-native/core/sharing";
-import { eq } from "drizzle-orm";
+import { asc, eq } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
@@ -26,11 +26,19 @@ export default defineAction({
     const row = access.resource;
     const db = getDb();
 
-    // Fetch associated files
+    // Fetch associated files in a stable order. This array feeds the overview
+    // canvas's screen stack and each screen's index within its layout group, so
+    // unordered rows (Postgres returns heap order, which an UPDATE can change)
+    // meant the same design could lay itself out differently on two loads.
+    // Note this is deterministic, not creation-ordered: files written in one
+    // batch share a `createdAt` to the millisecond and fall back to the id
+    // tiebreak. Nothing may depend on the index matching the order a generator
+    // wrote in — see the order-independence case in variant-lineup.test.ts.
     const files = await db
       .select()
       .from(schema.designFiles)
-      .where(eq(schema.designFiles.designId, id));
+      .where(eq(schema.designFiles.designId, id))
+      .orderBy(asc(schema.designFiles.createdAt), asc(schema.designFiles.id));
 
     return {
       id: row.id,

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

@@ -16,11 +16,16 @@ import { getDb, schema } from "../server/db/index.js";
 import { mutateDesignData } from "../server/lib/design-data-mutation.js";
 import {
   mergeCanvasFramePlacements,
+  nextFreeCanvasRowY,
   type CanvasFramePlacement,
 } from "../shared/canvas-frames.js";
 import { isUniqueConstraintViolation } from "../shared/db-conflict.js";
 import { assertDesignHtmlWellFormed } from "../shared/html-integrity.js";
 import { widthToPrefix } from "../shared/responsive-classes.js";
+import {
+  getResponsiveGroupWidth,
+  visibleBreakpointWidths,
+} from "../shared/responsive-frame-layout.js";
 import { annotateScreenHtmlForPersist } from "../shared/screen-annotation.js";
 
 const VARIANT_GAP = 96;
@@ -735,10 +740,24 @@ ${compact ? ".sidebar { padding: 16px; } .nav { grid-template-columns: repeat(2,
 </html>`;
 }
 
-function placeVariantScreens(screens: VariantScreen[]) {
+/**
+ * Lays the generated directions out in rows of up to three.
+ *
+ * Each cell reserves the screen's WHOLE painted footprint, not just its
+ * primary frame: this action also installs a design-wide breakpoint set, and
+ * the overview paints one preview per breakpoint to the right of every primary
+ * frame. Spacing by `width + VARIANT_GAP` alone drops the next direction on top
+ * of the previous one's breakpoint row.
+ */
+function placeVariantScreens(
+  screens: VariantScreen[],
+  breakpointWidths: readonly number[],
+  /** Y to start the lineup at, so an additional set clears the existing one. */
+  originY = 0,
+) {
   const placements: CanvasFramePlacement[] = [];
   const columns = Math.min(MAX_COLUMNS, Math.max(1, screens.length));
-  let rowY = 0;
+  let rowY = originY;
 
   for (let rowStart = 0; rowStart < screens.length; rowStart += columns) {
     const row = screens.slice(rowStart, rowStart + columns);
@@ -755,7 +774,17 @@ function placeVariantScreens(screens: VariantScreen[]) {
         height: screen.height,
         z: rowStart + offset,
       });
-      x += screen.width + VARIANT_GAP;
+      x +=
+        getResponsiveGroupWidth({
+          primaryWidth: screen.width,
+          // Frames are placed at their natural device width, so the breakpoint
+          // previews beside them are drawn unscaled.
+          scale: 1,
+          visibleWidths: visibleBreakpointWidths(
+            breakpointWidths,
+            screen.width,
+          ),
+        }) + VARIANT_GAP;
       rowHeight = Math.max(rowHeight, screen.height);
     }
 
@@ -765,6 +794,22 @@ function placeVariantScreens(screens: VariantScreen[]) {
   return placements;
 }
 
+/** Widths the overview will paint beside each primary frame once this call
+ * settles: the design's own set when it has one, otherwise the set this action
+ * is about to install. */
+function effectiveBreakpointWidths(currentBreakpointSet: unknown): number[] {
+  const breakpoints = hasBreakpointSet(currentBreakpointSet)
+    ? ((currentBreakpointSet as { breakpoints: Array<{ widthPx?: unknown }> })
+        .breakpoints ?? [])
+    : DEFAULT_RESPONSIVE_BREAKPOINTS;
+  return breakpoints
+    .map((breakpoint) => breakpoint.widthPx)
+    .filter(
+      (widthPx): widthPx is number =>
+        typeof widthPx === "number" && Number.isFinite(widthPx) && widthPx > 0,
+    );
+}
+
 export default defineAction({
   description:
     "Present generated design directions as normal screens on the Design " +
@@ -933,13 +978,25 @@ export default defineAction({
       });
     }
 
-    const placements = placeVariantScreens(screens);
     await mutateDesignData({
       designId,
       mutate: (current, { updatedAt }) => {
+        // Placement depends on the breakpoint set in effect after this call, so
+        // it is resolved here (inside the compare-and-set body) rather than
+        // against a design snapshot that a concurrent write may have moved on
+        // from.
         const mergedFrames = mergeCanvasFramePlacements({
           existing: current.canvasFrames,
-          placements,
+          placements: placeVariantScreens(
+            screens,
+            effectiveBreakpointWidths(current.breakpointSet),
+            // Start below what is already on the board. The set being written is
+            // excluded so re-running the same set lands where it was instead of
+            // marching further down each time.
+            nextFreeCanvasRowY(current.canvasFrames, VARIANT_GAP, {
+              ignoreFileIds: screens.map((screen) => screen.id),
+            }),
+          ),
           resolveFileId: (placement) => placement.fileId,
         });
         const previousMetadata = isRecord(current.screenMetadata)

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

@@ -26,6 +26,8 @@ import {
 import { Switch } from "@/components/ui/switch";
 import { cn } from "@/lib/utils";
 
+import { FRAME_SIZE_PRESET_CATEGORIES } from "./inspector/frame-size-presets";
+
 /** Framer's default breakpoint widths, offered by the "+" affordance. */
 export const FRAMER_BREAKPOINT_PRESETS: ReadonlyArray<{
   labelKey: "desktop" | "tablet" | "phone";
@@ -45,6 +47,35 @@ export function availableBreakpointPresets(
   );
 }
 
+/**
+ * Device widths offered beyond the three Framer defaults, drawn from the frame
+ * tool's own preset catalog so both surfaces agree on what a "Tablet" is.
+ *
+ * Without these the "+" popover empties out as soon as Desktop/Tablet/Phone are
+ * added — `availableBreakpointPresets` filters by exact width — leaving a bare
+ * number input and no way to pick a real device size. Only width matters for a
+ * breakpoint, so widths are de-duplicated (many devices share one) and the
+ * first device at each width names it. Device names are untranslated product
+ * literals, matching frame-size-presets' documented policy.
+ */
+export function extraBreakpointWidthPresets(
+  existingWidths: readonly number[],
+): Array<{ name: string; widthPx: number }> {
+  const taken = new Set<number>(existingWidths);
+  FRAMER_BREAKPOINT_PRESETS.forEach((preset) => taken.add(preset.widthPx));
+  const seen = new Set<number>();
+  const out: Array<{ name: string; widthPx: number }> = [];
+  for (const category of FRAME_SIZE_PRESET_CATEGORIES) {
+    for (const preset of category.presets) {
+      if (taken.has(preset.width) || seen.has(preset.width)) continue;
+      if (preset.width < 320 || preset.width > 3840) continue;
+      seen.add(preset.width);
+      out.push({ name: preset.name, widthPx: preset.width });
+    }
+  }
+  return out.sort((a, b) => b.widthPx - a.widthPx);
+}
+
 /** Default English label for a preset/custom width (used for add-breakpoint). */
 export function breakpointLabelForWidth(widthPx: number): string {
   if (widthPx >= 1024) return "Desktop";
@@ -128,6 +159,7 @@ export function BreakpointDeviceControl({
   const ordered = [...breakpoints].sort((a, b) => b.widthPx - a.widthPx);
   const existingWidths = ordered.map((bp) => bp.widthPx);
   const presets = availableBreakpointPresets(existingWidths);
+  const devicePresets = extraBreakpointWidthPresets(existingWidths);
   const baseActive = activeWidthPx === undefined;
 
   const submitCustomWidth = () => {
@@ -323,7 +355,38 @@ export function BreakpointDeviceControl({
                   </span>
                 </button>
               ))}
-              {presets.length > 0 ? (
+              {devicePresets.length > 0 ? (
+                <>
+                  {presets.length > 0 ? (
+                    <div className="my-1 h-px bg-border" />
+                  ) : null}
+                  <div className="max-h-48 overflow-y-auto overscroll-contain">
+                    {devicePresets.map((preset) => (
+                      <button
+                        key={preset.widthPx}
+                        type="button"
+                        className="flex w-full cursor-pointer items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left !text-[12px] hover:bg-muted"
+                        onClick={() => {
+                          onAdd(
+                            preset.widthPx,
+                            breakpointLabelForWidth(preset.widthPx),
+                          );
+                          setAddOpen(false);
+                        }}
+                      >
+                        <span className="flex min-w-0 items-center gap-2">
+                          <DeviceIcon widthPx={preset.widthPx} />
+                          <span className="truncate">{preset.name}</span>
+                        </span>
+                        <span className="shrink-0 tabular-nums text-muted-foreground/60">
+                          {preset.widthPx}
+                        </span>
+                      </button>
+                    ))}
+                  </div>
+                </>
+              ) : null}
+              {presets.length > 0 || devicePresets.length > 0 ? (
                 <div className="my-1 h-px bg-border" />
               ) : null}
               <form

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

@@ -48,6 +48,7 @@ import {
   IconChevronRight,
   IconCode,
   IconComponents,
+  IconDeviceMobile,
   IconExternalLink,
   IconDroplet,
   IconEye,
@@ -399,10 +400,31 @@ export function mergeOptimisticInteractionStateStyles(
 
 export type InspectorTab = "design" | "tweaks" | "comments" | "code";
 
+/** Floor for a typed/preset frame size. Matches the frame tool's own minimum
+ *  so a frame cannot be typed smaller than it can be drawn. */
+const MIN_SCREEN_FRAME_SIZE_PX = 24;
+
 interface EditPanelProps {
   selectedElement: ElementInfo | null;
   selectedElements?: ElementInfo[];
   selectedScreenGeometry?: ScreenGeometrySelection | null;
+  /**
+   * Resizes/moves the selected screen frame. When omitted the geometry fields
+   * stay read-only, which is what read-only viewers and non-editable designs
+   * get. Supplying it also reveals the size-preset picker: the frame tool's
+   * full-panel preset list is only reachable *before* a frame exists, so
+   * without this an existing frame could never be set to a device size.
+   */
+  /** Design-level canvas background — the surround, not a screen's document.
+   *  Omit onCanvasBackgroundChange to hide the Canvas section (read-only). */
+  canvasBackground?: string | null;
+  onCanvasBackgroundChange?: (value: string, meta?: StyleChangeMeta) => void;
+  onScreenGeometryChange?: (
+    screenId: string,
+    next: Partial<
+      Pick<ScreenGeometrySelection, "x" | "y" | "width" | "height">
+    >,
+  ) => void;
   pageStyles?: Record<string, string>;
   zoom?: number;
   headerTrailing?: ReactNode;
@@ -418,6 +440,9 @@ interface EditPanelProps {
   onStyleChange: StyleChangeHandler;
   onStylesChange?: StylesChangeHandler;
   onExport?: (settings: ExportSettingsValue[]) => void;
+  /** Rasterizes the current selection for the export preview. Must go through
+   *  the same renderer as `onExport`, or the preview lies about the output. */
+  onRenderExportPreview?: () => Promise<Blob>;
   exporting?: boolean;
   /** Active file id — used for component prop editing context. */
   fileId?: string;
@@ -1234,13 +1259,72 @@ function ScreenSelectionHeader({
   );
 }
 
+/** Preset picker for a selected frame's size. Kept behind a popover on the
+ *  Size label rather than an always-visible list: the frame tool's full-panel
+ *  preset list only exists before a frame is drawn, so a selected frame had no
+ *  way to reach the same sizes. */
+function ScreenSizePresetPicker({
+  onPick,
+}: {
+  onPick: (preset: FrameSizePreset) => void;
+}) {
+  const t = useT();
+  const [open, setOpen] = useState(false);
+  const label = t("editPanel.framePresets.applyToFrame");
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <PopoverTrigger asChild>
+            <button
+              type="button"
+              className="flex size-4 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground hover:bg-[var(--design-editor-control-hover-bg)] hover:text-foreground"
+              aria-label={label}
+            >
+              <IconDeviceMobile className="size-3.5" />
+            </button>
+          </PopoverTrigger>
+        </TooltipTrigger>
+        <TooltipContent side="left">{label}</TooltipContent>
+      </Tooltip>
+      <PopoverContent align="end" side="left" className="w-56 p-0">
+        <div className="flex max-h-80 flex-col overflow-hidden">
+          <FramePresetsPanel
+            onPick={(preset) => {
+              onPick(preset);
+              setOpen(false);
+            }}
+          />
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 function ScreenGeometryProperties({
   screen,
+  onGeometryChange,
 }: {
   screen: ScreenGeometrySelection;
+  onGeometryChange?: (
+    screenId: string,
+    next: Partial<
+      Pick<ScreenGeometrySelection, "x" | "y" | "width" | "height">
+    >,
+  ) => void;
 }) {
   const t = useT();
   const noop = useCallback(() => {}, []);
+  const editable = Boolean(onGeometryChange);
+  const commit = useCallback(
+    (
+      next: Partial<
+        Pick<ScreenGeometrySelection, "x" | "y" | "width" | "height">
+      >,
+    ) => onGeometryChange?.(screen.id, next),
+    [onGeometryChange, screen.id],
+  );
 
   return (
     <PanelSection title={t("editPanel.sections.positionLayout")}>
@@ -1250,40 +1334,51 @@ function ScreenGeometryProperties({
           <ScrubInput
             label="X"
             value={Math.round(screen.x)}
-            onChange={noop}
+            onChange={editable ? (value) => commit({ x: value }) : noop}
             unit="px"
-            disabled
+            disabled={!editable}
             inputClassName="h-6"
           />
           <ScrubInput
             label="Y"
             value={Math.round(screen.y)}
-            onChange={noop}
+            onChange={editable ? (value) => commit({ y: value }) : noop}
             unit="px"
-            disabled
+            disabled={!editable}
             inputClassName="h-6"
           />
         </div>
       </div>
       <div className="space-y-1.5">
-        <SubsectionLabel>
-          {"Size" /* i18n-ignore design inspector label */}
-        </SubsectionLabel>
+        <div className="flex items-center justify-between gap-2">
+          <SubsectionLabel>
+            {"Size" /* i18n-ignore design inspector label */}
+          </SubsectionLabel>
+          {editable ? (
+            <ScreenSizePresetPicker
+              onPick={(preset) =>
+                commit({ width: preset.width, height: preset.height })
+              }
+            />
+          ) : null}
+        </div>
         <div className="grid grid-cols-2 gap-2">
           <ScrubInput
             label="W"
             value={Math.round(screen.width)}
-            onChange={noop}
+            onChange={editable ? (value) => commit({ width: value }) : noop}
             unit="px"
-            disabled
+            min={MIN_SCREEN_FRAME_SIZE_PX}
+            disabled={!editable}
             inputClassName="h-6"
           />
           <ScrubInput
             label="H"
             value={Math.round(screen.height)}
-            onChange={noop}
+            onChange={editable ? (value) => commit({ height: value }) : noop}
             unit="px"
-            disabled
+            min={MIN_SCREEN_FRAME_SIZE_PX}
+            disabled={!editable}
             inputClassName="h-6"
           />
         </div>
@@ -1374,10 +1469,14 @@ function PageProperties({
   styles,
   onStyleChange,
   onStylesChange,
+  canvasBackground,
+  onCanvasBackgroundChange,
 }: {
   styles: Record<string, string>;
   onStyleChange: StyleChangeHandler;
   onStylesChange?: StylesChangeHandler;
+  canvasBackground?: string | null;
+  onCanvasBackgroundChange?: (value: string, meta?: StyleChangeMeta) => void;
 }) {
   const t = useT();
   const baseFontFamilyOptions = FONT_FAMILY_OPTIONS.map((option) => ({
@@ -1399,6 +1498,20 @@ function PageProperties({
 
   return (
     <div>
+      {/* With nothing selected you are looking at the canvas, so this edits the
+          canvas surround. The section below still owns the SCREEN's own
+          document background and type defaults. */}
+      {onCanvasBackgroundChange ? (
+        <PanelSection title={t("editPanel.sections.canvas")}>
+          <ColorInput
+            label={t("editPanel.labels.background")}
+            value={canvasBackground ?? ""}
+            // meta carries phase: "preview" while dragging vs "commit" on
+            // release. Dropping it persists every tick and the picker jumps.
+            onChange={(value, meta) => onCanvasBackgroundChange(value, meta)}
+          />
+        </PanelSection>
+      ) : null}
       <PanelSection title={t("editPanel.sections.page")}>
         <ColorInput
           label={t("editPanel.labels.background")}
@@ -1448,32 +1561,77 @@ function PageProperties({
  * frame above the export rows). Renders a proportional placeholder reflecting
  * the selected element's aspect ratio, fill, radius and dimensions.
  */
-function ExportPreview({ element }: { element: ElementInfo | null }) {
+/** Rasterizes through the same path the export actions use, so the preview
+ *  cannot disagree with the file. A failed render must stay visibly failed —
+ *  never substitute a synthesized stand-in for the real content. */
+function ExportPreview({
+  element,
+  onRender,
+}: {
+  element: ElementInfo | null;
+  onRender?: () => Promise<Blob>;
+}) {
+  const t = useT();
   const rect = element?.boundingRect;
   const width = rect?.width ?? 0;
   const height = rect?.height ?? 0;
   const aspect = width > 0 && height > 0 ? width / height : 1;
-  const styles = element?.computedStyles ?? {};
-  const fill = cssColorOrFallback(
-    styles.backgroundColor || styles.color,
-    "var(--design-editor-control-bg)",
-  );
-  const radius = Math.min(8, cssLengthNumber(styles.borderRadius || "0"));
+  const [state, setState] = useState<
+    | { status: "idle" }
+    | { status: "loading" }
+    | { status: "ready"; url: string }
+    | { status: "failed" }
+  >({ status: "idle" });
+
+  useEffect(() => {
+    if (!onRender) {
+      setState({ status: "idle" });
+      return;
+    }
+    let cancelled = false;
+    let objectUrl: string | null = null;
+    setState({ status: "loading" });
+    void onRender()
+      .then((blob) => {
+        if (cancelled) return;
+        objectUrl = URL.createObjectURL(blob);
+        setState({ status: "ready", url: objectUrl });
+      })
+      .catch(() => {
+        if (!cancelled) setState({ status: "failed" });
+      });
+    return () => {
+      cancelled = true;
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [onRender]);
 
   return (
     <div className="mt-1.5 rounded-md border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] p-3">
       <div
-        className="mx-auto flex max-h-28 items-center justify-center"
+        className="mx-auto flex max-h-28 items-center justify-center overflow-hidden"
         style={{
           aspectRatio: aspect,
           width: aspect >= 1 ? "100%" : "auto",
           height: aspect < 1 ? "7rem" : "auto",
         }}
       >
-        <div
-          className="size-full border border-[var(--design-editor-control-border)] shadow-sm"
-          style={{ background: fill, borderRadius: radius }}
-        />
+        {state.status === "ready" ? (
+          <img
+            src={state.url}
+            alt=""
+            className="size-full object-contain"
+            style={{
+              imageRendering: "auto",
+            }}
+          />
+        ) : (
+          <div className="flex size-full items-center justify-center rounded border border-[var(--design-editor-control-border)] bg-[var(--design-editor-panel-bg)] px-2 text-center !text-[10px] text-muted-foreground">
+            {state.status === "failed"
+              ? t("editPanel.exportPreview.failed")
+              : t("editPanel.exportPreview.rendering")}
+          </div>
+        )}
       </div>
       <p className="mt-2 text-center text-[10px] tabular-nums text-muted-foreground">
         {Math.round(width)} × {Math.round(height)}
@@ -1591,6 +1749,9 @@ export const EditPanel = memo(function EditPanel({
   selectedElement,
   selectedElements,
   selectedScreenGeometry,
+  canvasBackground,
+  onCanvasBackgroundChange,
+  onScreenGeometryChange,
   pageStyles = {},
   headerTrailing,
   width = 256,
@@ -1604,6 +1765,7 @@ export const EditPanel = memo(function EditPanel({
   onStyleChange: onStyleChangeProp,
   onStylesChange: onStylesChangeProp,
   onExport,
+  onRenderExportPreview,
   exporting = false,
   fileId,
   activeContent,
@@ -2106,7 +2268,12 @@ export const EditPanel = memo(function EditPanel({
               ) : null}
 
               {!inspectorElement && selectedScreenGeometry ? (
-                <ScreenGeometryProperties screen={selectedScreenGeometry} />
+                <ScreenGeometryProperties
+                  screen={selectedScreenGeometry}
+                  onGeometryChange={
+                    readOnly ? undefined : onScreenGeometryChange
+                  }
+                />
               ) : null}
 
               {!inspectorElement && !selectedScreenGeometry && (
@@ -2114,6 +2281,10 @@ export const EditPanel = memo(function EditPanel({
                   styles={pageStyles}
                   onStyleChange={onStyleChange}
                   onStylesChange={onStylesChange}
+                  canvasBackground={canvasBackground}
+                  onCanvasBackgroundChange={
+                    readOnly ? undefined : onCanvasBackgroundChange
+                  }
                 />
               )}
 
@@ -2232,7 +2403,10 @@ export const EditPanel = memo(function EditPanel({
                     onExport={onExport}
                   />
                   {showExportPreview ? (
-                    <ExportPreview element={inspectorElement} />
+                    <ExportPreview
+                      element={inspectorElement}
+                      onRender={onRenderExportPreview}
+                    />
                   ) : null}
                 </PanelSection>
               ) : null}