@agent-native/core 0.84.14 → 0.84.17

package/corpus/templates/analytics/server/lib/session-replay.ts

@@ -275,6 +275,53 @@ function replayMaxIso(values: Array<string | null | undefined>): string | null {
   return present.reduce((max, value) => (value > max ? value : max));
 }
 
+function replayClampIso(
+  value: string | null | undefined,
+  latestIso: string,
+): string | null {
+  if (!value) return null;
+  const parsed = Date.parse(value);
+  const latest = Date.parse(latestIso);
+  if (!Number.isFinite(parsed)) return null;
+  if (!Number.isFinite(latest)) return value;
+  return parsed > latest ? latestIso : value;
+}
+
+function clampReplayChunkTiming(
+  chunk: NormalizedSessionReplayChunk,
+  latestIso: string,
+): NormalizedSessionReplayChunk {
+  const startedAt = replayClampIso(chunk.startedAt, latestIso);
+  let endedAt = replayClampIso(chunk.endedAt, latestIso);
+  if (startedAt && endedAt && endedAt < startedAt) {
+    endedAt = startedAt;
+  }
+  return { ...chunk, startedAt, endedAt };
+}
+
+function clampReplayIngestTiming(
+  input: ParsedSessionReplayIngest,
+  latestIso: string,
+): ParsedSessionReplayIngest {
+  const chunks = input.chunks.map((chunk) =>
+    clampReplayChunkTiming(chunk, latestIso),
+  );
+  const startedAt =
+    replayMinIso([
+      replayClampIso(input.startedAt, latestIso),
+      ...chunks.map((chunk) => chunk.startedAt),
+    ]) ?? latestIso;
+  let endedAt = replayMaxIso([
+    replayClampIso(input.endedAt, latestIso),
+    ...chunks.map((chunk) => chunk.endedAt),
+  ]);
+  if (endedAt && endedAt < startedAt) endedAt = startedAt;
+  const durationMs = endedAt
+    ? Math.max(0, Date.parse(endedAt) - Date.parse(startedAt))
+    : input.durationMs;
+  return { ...input, startedAt, endedAt, durationMs, chunks };
+}
+
 function normalizeReplayUrl(url: string | null): {
   url: string | null;
   path: string | null;
@@ -1101,7 +1148,8 @@ export async function recordSessionReplayChunks(
 }> {
   const key = await resolveReplayPublicKey(input.publicKey, context);
   const db = getDb() as any;
-  const ingestedAt = replayNowIso();
+  const ingestedAt = replayTimestamp(context.now) ?? replayNowIso();
+  const clampedInput = clampReplayIngestTiming(input, ingestedAt);
 
   let [recording] = await db
     .select()
@@ -1109,7 +1157,10 @@ export async function recordSessionReplayChunks(
     .where(
       and(
         eq(schema.sessionRecordings.publicKeyId, key.id),
-        eq(schema.sessionRecordings.clientRecordingId, input.clientRecordingId),
+        eq(
+          schema.sessionRecordings.clientRecordingId,
+          clampedInput.clientRecordingId,
+        ),
       ),
     )
     .limit(1);
@@ -1121,27 +1172,27 @@ export async function recordSessionReplayChunks(
       .values({
         id: newRecordingId,
         publicKeyId: key.id,
-        clientRecordingId: input.clientRecordingId,
-        sessionId: input.sessionId,
-        userId: input.userId,
-        anonymousId: input.anonymousId,
-        userKey: input.userKey,
-        startedAt: input.startedAt,
-        endedAt: input.endedAt,
-        durationMs: input.durationMs,
-        pageCount: input.pageCount,
-        errorCount: input.errorCount,
-        rageClickCount: input.rageClickCount,
-        privacyMode: input.privacyMode,
-        firstUrl: input.url,
-        lastUrl: input.url,
-        path: input.path,
-        hostname: input.hostname,
-        referrer: input.referrer,
-        app: input.app,
-        template: input.template,
-        status: input.status,
-        metadata: JSON.stringify(input.metadata),
+        clientRecordingId: clampedInput.clientRecordingId,
+        sessionId: clampedInput.sessionId,
+        userId: clampedInput.userId,
+        anonymousId: clampedInput.anonymousId,
+        userKey: clampedInput.userKey,
+        startedAt: clampedInput.startedAt,
+        endedAt: clampedInput.endedAt,
+        durationMs: clampedInput.durationMs,
+        pageCount: clampedInput.pageCount,
+        errorCount: clampedInput.errorCount,
+        rageClickCount: clampedInput.rageClickCount,
+        privacyMode: clampedInput.privacyMode,
+        firstUrl: clampedInput.url,
+        lastUrl: clampedInput.url,
+        path: clampedInput.path,
+        hostname: clampedInput.hostname,
+        referrer: clampedInput.referrer,
+        app: clampedInput.app,
+        template: clampedInput.template,
+        status: clampedInput.status,
+        metadata: JSON.stringify(clampedInput.metadata),
         lastIngestedAt: ingestedAt,
         ownerEmail: key.ownerEmail,
         orgId: key.orgId,
@@ -1162,7 +1213,7 @@ export async function recordSessionReplayChunks(
           eq(schema.sessionRecordings.publicKeyId, key.id),
           eq(
             schema.sessionRecordings.clientRecordingId,
-            input.clientRecordingId,
+            clampedInput.clientRecordingId,
           ),
         ),
       )
@@ -1193,7 +1244,7 @@ export async function recordSessionReplayChunks(
     existingChunks.length === 0;
 
   try {
-    for (const rawChunk of input.chunks) {
+    for (const rawChunk of clampedInput.chunks) {
       const existing = existingBySeq.get(rawChunk.seq);
       if (existing) {
         if (existing.checksum !== rawChunk.checksum) {
@@ -1272,13 +1323,15 @@ export async function recordSessionReplayChunks(
     id: replayId("sri"),
     publicKeyId: key.id,
     recordingId: recording.id,
-    byteLength: replayIngestByteLength(input, context),
+    byteLength: replayIngestByteLength(clampedInput, context),
     createdAt: ingestedAt,
     ownerEmail: key.ownerEmail,
     orgId: key.orgId,
   });
 
-  const allChunks = [...existingChunks, ...rowsToInsert];
+  const allChunks = [...existingChunks, ...rowsToInsert].map((chunk: any) =>
+    clampReplayChunkTiming(chunk, ingestedAt),
+  );
   const chunkCount = allChunks.length;
   const eventCount = allChunks.reduce(
     (sum, chunk: any) => sum + Number(chunk.eventCount ?? 0),
@@ -1291,57 +1344,63 @@ export async function recordSessionReplayChunks(
   const startedAt =
     replayMinIso([
       recording.startedAt,
-      input.startedAt,
+      clampedInput.startedAt,
       ...allChunks.map((chunk: any) => chunk.startedAt),
-    ]) ?? input.startedAt;
+    ]) ?? clampedInput.startedAt;
   const endedAt =
     replayMaxIso([
       recording.endedAt,
-      input.endedAt,
+      clampedInput.endedAt,
       ...allChunks.map((chunk: any) => chunk.endedAt),
     ]) ?? null;
   const durationMs =
-    input.durationMs ??
+    clampedInput.durationMs ??
     (endedAt
       ? Math.max(0, Date.parse(endedAt) - Date.parse(startedAt))
       : (recording.durationMs ?? null));
   const metadata = mergeReplayMetadata(
     parseRecordingMetadata(recording),
-    input.metadata,
+    clampedInput.metadata,
   );
 
   await db
     .update(schema.sessionRecordings)
     .set({
-      sessionId: input.sessionId,
-      userId: input.userId ?? recording.userId ?? null,
-      anonymousId: input.anonymousId ?? recording.anonymousId ?? null,
-      userKey: input.userKey ?? recording.userKey ?? null,
+      sessionId: clampedInput.sessionId,
+      userId: clampedInput.userId ?? recording.userId ?? null,
+      anonymousId: clampedInput.anonymousId ?? recording.anonymousId ?? null,
+      userKey: clampedInput.userKey ?? recording.userKey ?? null,
       startedAt,
       endedAt,
       durationMs,
       chunkCount,
       eventCount,
       totalBytes,
-      pageCount: Math.max(Number(recording.pageCount ?? 0), input.pageCount),
-      errorCount: Math.max(Number(recording.errorCount ?? 0), input.errorCount),
+      pageCount: Math.max(
+        Number(recording.pageCount ?? 0),
+        clampedInput.pageCount,
+      ),
+      errorCount: Math.max(
+        Number(recording.errorCount ?? 0),
+        clampedInput.errorCount,
+      ),
       rageClickCount: Math.max(
         Number(recording.rageClickCount ?? 0),
-        input.rageClickCount,
+        clampedInput.rageClickCount,
       ),
       privacyMode:
-        input.privacyMode !== "unknown"
-          ? input.privacyMode
+        clampedInput.privacyMode !== "unknown"
+          ? clampedInput.privacyMode
           : (recording.privacyMode ?? "unknown"),
-      firstUrl: recording.firstUrl ?? input.url,
-      lastUrl: input.url ?? recording.lastUrl ?? null,
-      path: input.path ?? recording.path ?? null,
-      hostname: input.hostname ?? recording.hostname ?? null,
-      referrer: input.referrer ?? recording.referrer ?? null,
-      app: input.app ?? recording.app ?? null,
-      template: input.template ?? recording.template ?? null,
+      firstUrl: recording.firstUrl ?? clampedInput.url,
+      lastUrl: clampedInput.url ?? recording.lastUrl ?? null,
+      path: clampedInput.path ?? recording.path ?? null,
+      hostname: clampedInput.hostname ?? recording.hostname ?? null,
+      referrer: clampedInput.referrer ?? recording.referrer ?? null,
+      app: clampedInput.app ?? recording.app ?? null,
+      template: clampedInput.template ?? recording.template ?? null,
       status:
-        input.status === "completed" || recording.status === "completed"
+        clampedInput.status === "completed" || recording.status === "completed"
           ? "completed"
           : "active",
       metadata: JSON.stringify(metadata),
@@ -1364,7 +1423,7 @@ export async function recordSessionReplayChunks(
 
   return {
     recordingId: recording.id,
-    sessionId: input.sessionId,
+    sessionId: clampedInput.sessionId,
     acceptedChunks: rowsToInsert.length,
     duplicateChunks,
     chunkCount,

package/corpus/templates/analytics/server/plugins/db.ts

@@ -492,6 +492,27 @@ export default runMigrations(
       version: 71,
       sql: `CREATE INDEX IF NOT EXISTS session_replay_ingests_recording_idx ON session_replay_ingests (recording_id)`,
     },
+    {
+      version: 72,
+      sql: {
+        postgres: `UPDATE analytics_events SET timestamp = COALESCE(NULLIF(received_at, ''), to_char(CURRENT_TIMESTAMP AT TIME ZONE 'UTC', 'YYYY-MM-DD"T"HH24:MI:SS.MS"Z"')), event_date = substr(COALESCE(NULLIF(received_at, ''), to_char(CURRENT_TIMESTAMP AT TIME ZONE 'UTC', 'YYYY-MM-DD"T"HH24:MI:SS.MS"Z"')), 1, 10) WHERE COALESCE(NULLIF(event_date, ''), substr(timestamp, 1, 10)) > to_char(CURRENT_DATE, 'YYYY-MM-DD')`,
+        sqlite: `UPDATE analytics_events SET timestamp = COALESCE(NULLIF(received_at, ''), datetime('now')), event_date = substr(COALESCE(NULLIF(received_at, ''), date('now')), 1, 10) WHERE COALESCE(NULLIF(event_date, ''), substr(timestamp, 1, 10)) > date('now')`,
+      },
+    },
+    {
+      version: 73,
+      sql: {
+        postgres: `UPDATE session_recordings SET started_at = CASE WHEN substr(started_at, 1, 10) > to_char(CURRENT_DATE, 'YYYY-MM-DD') THEN LEAST(COALESCE(NULLIF(last_ingested_at, ''), NULLIF(updated_at, ''), NULLIF(created_at, ''), to_char(CURRENT_TIMESTAMP AT TIME ZONE 'UTC', 'YYYY-MM-DD"T"HH24:MI:SS.MS"Z"')), to_char(CURRENT_TIMESTAMP AT TIME ZONE 'UTC', 'YYYY-MM-DD"T"HH24:MI:SS.MS"Z"')) ELSE started_at END, ended_at = CASE WHEN ended_at IS NOT NULL AND substr(ended_at, 1, 10) > to_char(CURRENT_DATE, 'YYYY-MM-DD') THEN LEAST(COALESCE(NULLIF(last_ingested_at, ''), NULLIF(updated_at, ''), NULLIF(created_at, ''), to_char(CURRENT_TIMESTAMP AT TIME ZONE 'UTC', 'YYYY-MM-DD"T"HH24:MI:SS.MS"Z"')), to_char(CURRENT_TIMESTAMP AT TIME ZONE 'UTC', 'YYYY-MM-DD"T"HH24:MI:SS.MS"Z"')) ELSE ended_at END WHERE (owner_email IS NOT NULL OR org_id IS NOT NULL) AND (substr(started_at, 1, 10) > to_char(CURRENT_DATE, 'YYYY-MM-DD') OR (ended_at IS NOT NULL AND substr(ended_at, 1, 10) > to_char(CURRENT_DATE, 'YYYY-MM-DD')))`,
+        sqlite: `UPDATE session_recordings SET started_at = CASE WHEN substr(started_at, 1, 10) > date('now') THEN min(COALESCE(NULLIF(last_ingested_at, ''), NULLIF(updated_at, ''), NULLIF(created_at, ''), datetime('now')), datetime('now')) ELSE started_at END, ended_at = CASE WHEN ended_at IS NOT NULL AND substr(ended_at, 1, 10) > date('now') THEN min(COALESCE(NULLIF(last_ingested_at, ''), NULLIF(updated_at, ''), NULLIF(created_at, ''), datetime('now')), datetime('now')) ELSE ended_at END WHERE (owner_email IS NOT NULL OR org_id IS NOT NULL) AND (substr(started_at, 1, 10) > date('now') OR (ended_at IS NOT NULL AND substr(ended_at, 1, 10) > date('now')))`,
+      },
+    },
+    {
+      version: 74,
+      sql: {
+        postgres: `UPDATE session_replay_chunks SET started_at = CASE WHEN started_at IS NOT NULL AND substr(started_at, 1, 10) > to_char(CURRENT_DATE, 'YYYY-MM-DD') THEN LEAST(COALESCE(NULLIF(created_at, ''), to_char(CURRENT_TIMESTAMP AT TIME ZONE 'UTC', 'YYYY-MM-DD"T"HH24:MI:SS.MS"Z"')), to_char(CURRENT_TIMESTAMP AT TIME ZONE 'UTC', 'YYYY-MM-DD"T"HH24:MI:SS.MS"Z"')) ELSE started_at END, ended_at = CASE WHEN ended_at IS NOT NULL AND substr(ended_at, 1, 10) > to_char(CURRENT_DATE, 'YYYY-MM-DD') THEN LEAST(COALESCE(NULLIF(created_at, ''), to_char(CURRENT_TIMESTAMP AT TIME ZONE 'UTC', 'YYYY-MM-DD"T"HH24:MI:SS.MS"Z"')), to_char(CURRENT_TIMESTAMP AT TIME ZONE 'UTC', 'YYYY-MM-DD"T"HH24:MI:SS.MS"Z"')) ELSE ended_at END WHERE (started_at IS NOT NULL AND substr(started_at, 1, 10) > to_char(CURRENT_DATE, 'YYYY-MM-DD')) OR (ended_at IS NOT NULL AND substr(ended_at, 1, 10) > to_char(CURRENT_DATE, 'YYYY-MM-DD'))`,
+        sqlite: `UPDATE session_replay_chunks SET started_at = CASE WHEN started_at IS NOT NULL AND substr(started_at, 1, 10) > date('now') THEN min(COALESCE(NULLIF(created_at, ''), datetime('now')), datetime('now')) ELSE started_at END, ended_at = CASE WHEN ended_at IS NOT NULL AND substr(ended_at, 1, 10) > date('now') THEN min(COALESCE(NULLIF(created_at, ''), datetime('now')), datetime('now')) ELSE ended_at END WHERE (started_at IS NOT NULL AND substr(started_at, 1, 10) > date('now')) OR (ended_at IS NOT NULL AND substr(ended_at, 1, 10) > date('now'))`,
+      },
+    },
   ],
   { table: "analytics_migrations" },
 );

package/corpus/templates/clips/chrome-extension/public/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Agent-Native Clips",
   "short_name": "Clips",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Start Clips recordings from Chrome, capture optional diagnostics, and preview Clips links on GitHub.",
   "minimum_chrome_version": "116",
   "action": {

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

@@ -815,6 +815,134 @@ function sanitizeHtml2CanvasClone(
   });
 }
 
+/**
+ * Editor-chrome overlays that editor-chrome.bridge.ts appends inside the preview
+ * iframe (the selection outline + resize handles, hover highlight, marquee,
+ * spacing/measurement guides, and badges). They live in the iframe DOM, so image
+ * exports must strip them from the clone — otherwise a download captures the
+ * editor's selection outline instead of just the design. Keep this in sync with
+ * the data-agent-native-* markers set in editor-chrome.bridge.ts.
+ */
+export const EDITOR_CHROME_OVERLAY_SELECTOR = [
+  "[data-agent-native-edit-overlay]",
+  "[data-agent-native-edit-handle]",
+  "[data-agent-native-edge-handle]",
+  "[data-agent-native-rotate-handle]",
+  "[data-agent-native-transform-badge]",
+  "[data-agent-native-spacing-badge]",
+  "[data-agent-native-spacing-overlay]",
+  "[data-agent-native-spacing-line]",
+  "[data-agent-native-spacing-region]",
+  "[data-agent-native-insertion-guide]",
+  "[data-agent-native-measurement-overlay]",
+].join(",");
+
+/**
+ * Remove editor-chrome overlays from a cloned document/element before it is
+ * rasterized (PNG) or serialized (SVG) for export.
+ */
+function removeEditorChromeOverlays(root: ParentNode): void {
+  root
+    .querySelectorAll(EDITOR_CHROME_OVERLAY_SELECTOR)
+    .forEach((element) => element.remove());
+}
+
+/**
+ * Resolve the document-space rect of the currently selected element inside the
+ * preview iframe so image exports (PNG/SVG) can crop to just that frame instead
+ * of the whole screen. Returns null — meaning "export the whole screen" — when
+ * there is no element selection, when the selection is the screen root
+ * (BODY/HTML, which is the whole screen anyway), or when the element can no
+ * longer be resolved in the live document.
+ */
+function resolveExportCropRect(
+  doc: Document,
+  selected: ElementInfo | null | undefined,
+): { x: number; y: number; width: number; height: number } | null {
+  if (!selected || isScreenRootElementInfo(selected)) return null;
+  const view = doc.defaultView;
+  if (!view) return null;
+  let element: Element | null = null;
+  if (selected.sourceId) {
+    try {
+      element = doc.querySelector(
+        `[data-agent-native-node-id="${CSS.escape(selected.sourceId)}"]`,
+      );
+    } catch {
+      element = null;
+    }
+  }
+  if (!element && selected.selector) {
+    try {
+      element = doc.querySelector(selected.selector);
+    } catch {
+      element = null;
+    }
+  }
+  if (!element) return null;
+  const rect = element.getBoundingClientRect();
+  if (rect.width <= 0 || rect.height <= 0) return null;
+  // getBoundingClientRect is viewport-relative; add the iframe scroll offset so
+  // coordinates match the full-document render (which starts at the page top).
+  return {
+    x: rect.left + (view.scrollX ?? 0),
+    y: rect.top + (view.scrollY ?? 0),
+    width: rect.width,
+    height: rect.height,
+  };
+}
+
+/**
+ * Map a document-space rect onto pixel coordinates within a rendered canvas of
+ * the given size, clamped to stay inside the canvas. `scale` must match the
+ * scale passed to html2canvas. Returns null when the crop would be empty or
+ * lands fully outside the canvas, so callers can fall back to the full render.
+ */
+export function computeExportCropBox(
+  sourceWidth: number,
+  sourceHeight: number,
+  rect: { x: number; y: number; width: number; height: number },
+  scale: number,
+): { sx: number; sy: number; sw: number; sh: number } | null {
+  const sx = Math.max(0, Math.round(rect.x * scale));
+  const sy = Math.max(0, Math.round(rect.y * scale));
+  const sw = Math.min(sourceWidth - sx, Math.round(rect.width * scale));
+  const sh = Math.min(sourceHeight - sy, Math.round(rect.height * scale));
+  if (sw <= 0 || sh <= 0) return null;
+  return { sx, sy, sw, sh };
+}
+
+/**
+ * Crop a rendered html2canvas canvas down to a document-space rect so image
+ * exports capture just the selected frame. Returns null when the crop is empty,
+ * so callers can fall back to the full render.
+ */
+function cropCanvasToRect(
+  source: HTMLCanvasElement,
+  rect: { x: number; y: number; width: number; height: number },
+  scale: number,
+): HTMLCanvasElement | null {
+  const box = computeExportCropBox(source.width, source.height, rect, scale);
+  if (!box) return null;
+  const cropped = document.createElement("canvas");
+  cropped.width = box.sw;
+  cropped.height = box.sh;
+  const context = cropped.getContext("2d");
+  if (!context) return null;
+  context.drawImage(
+    source,
+    box.sx,
+    box.sy,
+    box.sw,
+    box.sh,
+    0,
+    0,
+    box.sw,
+    box.sh,
+  );
+  return cropped;
+}
+
 function byteLength(value: string): number {
   if (typeof TextEncoder === "undefined") return value.length;
   return new TextEncoder().encode(value).length;
@@ -9068,6 +9196,11 @@ export default function DesignEditor() {
       title: shortLabel,
       context: contextLines.join("\n"),
       openSidebar: false,
+      // Mirror the selection into chat context without stealing focus: this
+      // effect re-fires on every selection change and on each get-design poll
+      // during an agent run, and focusing the composer here would blur (and
+      // tear down) an in-progress inline text edit on the canvas.
+      focus: false,
     });
   }, [activeFile, design?.title, id, selectedCodeLayerNode, selectedElement]);
 
@@ -13174,26 +13307,38 @@ export default function DesignEditor() {
           doc.body?.scrollHeight ?? 0,
           iframe?.clientHeight ?? 0,
         );
+        const exportScale = Math.max(
+          0.1,
+          Math.min(
+            4,
+            settings?.scale ?? Math.min(2, window.devicePixelRatio || 1),
+          ),
+        );
+        // When an element is selected, crop the export to just that frame.
+        const cropRect = resolveExportCropRect(doc, selectedElement);
         const canvas = await html2canvas(doc.documentElement, {
           width,
           height,
           windowWidth: width,
           windowHeight: height,
-          scale: Math.max(
-            0.1,
-            Math.min(
-              4,
-              settings?.scale ?? Math.min(2, window.devicePixelRatio || 1),
-            ),
-          ),
+          scale: exportScale,
           useCORS: true,
           foreignObjectRendering: true,
           backgroundColor: null,
-          onclone: (clonedDocument) =>
-            sanitizeHtml2CanvasClone(doc, clonedDocument),
+          onclone: (clonedDocument) => {
+            // Sanitize colors first: it aligns source/clone elements by index,
+            // so remove the editor-chrome overlays only afterwards.
+            sanitizeHtml2CanvasClone(doc, clonedDocument);
+            removeEditorChromeOverlays(clonedDocument);
+          },
         });
+        // Render the whole page first, then crop, so ancestor backgrounds show
+        // through the selected frame exactly as they do on screen.
+        const outputCanvas = cropRect
+          ? (cropCanvasToRect(canvas, cropRect, exportScale) ?? canvas)
+          : canvas;
         await new Promise<void>((resolve) => {
-          canvas.toBlob((blob) => {
+          outputCanvas.toBlob((blob) => {
             try {
               if (!blob) {
                 toast.error(t("designEditor.toasts.pngCreateError"));
@@ -13235,7 +13380,7 @@ export default function DesignEditor() {
         setPngExporting(false);
       }
     },
-    [fallbackExportName, t, triggerBlobDownload],
+    [fallbackExportName, selectedElement, t, triggerBlobDownload],
   );
 
   const handleDownloadSvg = useCallback(
@@ -13297,6 +13442,9 @@ export default function DesignEditor() {
           clonedStylesheetLinks[index]?.replaceWith(style);
         });
         clone.querySelectorAll("script").forEach((node) => node.remove());
+        // Strip the editor's selection outline / handles so the SVG shows only
+        // the design, not the editor chrome.
+        removeEditorChromeOverlays(clone);
         clone.style.width = `${width}px`;
         clone.style.minHeight = `${height}px`;
 
@@ -13315,8 +13463,17 @@ export default function DesignEditor() {
             .replace(/</g, "&lt;")
             .replace(/>/g, "&gt;") || t("designEditor.designExport");
         const exportScale = Math.max(0.1, Math.min(4, settings?.scale ?? 1));
+        // When an element is selected, crop to just that frame by narrowing the
+        // SVG viewBox to its document-space rect. The foreignObject still holds
+        // the full document so layout and inherited styles stay intact; the
+        // viewBox clips the visible region to the selection.
+        const cropRect = resolveExportCropRect(doc, selectedElement);
+        const viewX = cropRect?.x ?? 0;
+        const viewY = cropRect?.y ?? 0;
+        const viewWidth = cropRect?.width ?? width;
+        const viewHeight = cropRect?.height ?? height;
         const svg = `<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="${width * exportScale}" height="${height * exportScale}" viewBox="0 0 ${width} ${height}" role="img" aria-label="${safeTitle}">
+<svg xmlns="http://www.w3.org/2000/svg" width="${viewWidth * exportScale}" height="${viewHeight * exportScale}" viewBox="${viewX} ${viewY} ${viewWidth} ${viewHeight}" role="img" aria-label="${safeTitle}">
   <title>${safeTitle}</title>
   <foreignObject width="${width}" height="${height}">
 ${serializedHtml}
@@ -13339,7 +13496,13 @@ ${serializedHtml}
         setSvgExporting(false);
       }
     },
-    [design?.title, fallbackExportName, t, triggerBlobDownload],
+    [
+      design?.title,
+      fallbackExportName,
+      selectedElement,
+      t,
+      triggerBlobDownload,
+    ],
   );
 
   const handleInspectorExport = useCallback(

package/corpus/templates/design/changelog/2026-07-01-exporting-a-design-as-png-or-svg-now-downloads-just-the-sele.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-01
+---
+
+Exporting a design as PNG or SVG now downloads just the selected frame instead of the entire screen.

package/dist/agent/durable-background.d.ts

@@ -57,6 +57,7 @@ export declare const AGENT_BACKGROUND_FUNCTION_URL_PATH = "/.netlify/functions/s
  * to shadow because `/.netlify/*` is already excluded from the `server` catch-all.
  */
 export declare function resolveAgentChatProcessRunDispatchPath(): string;
+export declare function dispatchPathTargetsNetlifyBackgroundFunction(dispatchPath: string): boolean;
 /**
  * Env flag for durable background runs. DEFAULT-OFF (opt-in): unset means
  * disabled; an app opts IN with an explicit truthy value (`true`/`1`/`yes`/`on`).

package/dist/agent/durable-background.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"durable-background.d.ts","sourceRoot":"","sources":["../../src/agent/durable-background.ts"],"names":[],"mappings":"AAgDA;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,2CACE,CAAC;AAE3C;;;;;;;;GAQG;AACH,eAAO,MAAM,8BAA8B,4BAA4B,CAAC;AAExE;;;;;;;;;GASG;AACH,eAAO,MAAM,kCAAkC,gDAA0D,CAAC;AAiC1G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,sCAAsC,IAAI,MAAM,CAQ/D;AAED;;;GAGG;AACH,eAAO,MAAM,iCAAiC,kCACb,CAAC;AAElC;;;;;;GAMG;AACH,eAAO,MAAM,+BAA+B,oBAAoB,CAAC;AAEjE;;;;GAIG;AACH,wBAAgB,mCAAmC,IAAI,OAAO,CAsB7D;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,6BAA6B,IAAI,OAAO,CAsBvD;AAED,wBAAgB,2CAA2C,CACzD,MAAM,EAAE,OAAO,GACd,OAAO,CAOT;AAED,wBAAgB,2CAA2C,CACzD,MAAM,EAAE,OAAO,GACd,OAAO,CAKT;AAED,wBAAgB,iCAAiC,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,CAQzE;AAwCD;;;;;;;GAOG;AACH,wBAAgB,mCAAmC,CAAC,OAAO,CAAC,EAAE;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,OAAO,CAWV;AAED,uDAAuD;AACvD,MAAM,MAAM,qBAAqB,GAC7B;IACE,EAAE,EAAE,IAAI,CAAC;IACT,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B,GACD;IACE,EAAE,EAAE,KAAK,CAAC;IACV,2CAA2C;IAC3C,MAAM,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAEN;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAahE;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,OAAO,EACb,UAAU,EAAE,MAAM,GAAG,SAAS,GAC7B,qBAAqB,CAiDvB"}
+{"version":3,"file":"durable-background.d.ts","sourceRoot":"","sources":["../../src/agent/durable-background.ts"],"names":[],"mappings":"AAgDA;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,2CACE,CAAC;AAE3C;;;;;;;;GAQG;AACH,eAAO,MAAM,8BAA8B,4BAA4B,CAAC;AAExE;;;;;;;;;GASG;AACH,eAAO,MAAM,kCAAkC,gDAA0D,CAAC;AAiC1G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,sCAAsC,IAAI,MAAM,CAQ/D;AAED,wBAAgB,4CAA4C,CAC1D,YAAY,EAAE,MAAM,GACnB,OAAO,CAET;AAED;;;GAGG;AACH,eAAO,MAAM,iCAAiC,kCACb,CAAC;AAElC;;;;;;GAMG;AACH,eAAO,MAAM,+BAA+B,oBAAoB,CAAC;AAEjE;;;;GAIG;AACH,wBAAgB,mCAAmC,IAAI,OAAO,CAsB7D;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,6BAA6B,IAAI,OAAO,CAsBvD;AAED,wBAAgB,2CAA2C,CACzD,MAAM,EAAE,OAAO,GACd,OAAO,CAOT;AAED,wBAAgB,2CAA2C,CACzD,MAAM,EAAE,OAAO,GACd,OAAO,CAKT;AAED,wBAAgB,iCAAiC,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,CAQzE;AAwCD;;;;;;;GAOG;AACH,wBAAgB,mCAAmC,CAAC,OAAO,CAAC,EAAE;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,OAAO,CAWV;AAED,uDAAuD;AACvD,MAAM,MAAM,qBAAqB,GAC7B;IACE,EAAE,EAAE,IAAI,CAAC;IACT,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B,GACD;IACE,EAAE,EAAE,KAAK,CAAC;IACV,2CAA2C;IAC3C,MAAM,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAEN;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAahE;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,wBAAwB,CACtC,IAAI,EAAE,OAAO,EACb,UAAU,EAAE,MAAM,GAAG,SAAS,GAC7B,qBAAqB,CAiDvB"}

package/dist/agent/durable-background.js

@@ -138,6 +138,9 @@ export function resolveAgentChatProcessRunDispatchPath() {
     }
     return AGENT_CHAT_PROCESS_RUN_PATH;
 }
+export function dispatchPathTargetsNetlifyBackgroundFunction(dispatchPath) {
+    return dispatchPath.startsWith("/.netlify/functions/");
+}
 /**
  * Env flag for durable background runs. DEFAULT-OFF (opt-in): unset means
  * disabled; an app opts IN with an explicit truthy value (`true`/`1`/`yes`/`on`).