autokap 1.8.4 → 1.8.6

package/dist/cli-runner.js

@@ -1107,6 +1107,7 @@ async function prepareScreenshotBufferForDirectUpload(input, metadata, program,
         }
         output = await applyDeviceFrame(output, variantSpec.deviceFrame, {
             orientation: inferCliOrientation(metadata.viewport ?? null),
+            viewport: metadata.viewport ?? undefined,
             colorScheme: metadata.theme,
             outputScale: normalizeCliDeviceScaleFactor(metadata.deviceScaleFactor)
                 ?? normalizeCliDeviceScaleFactor(program.outputScale)

package/dist/mockup.d.ts

@@ -191,6 +191,18 @@ export interface MockupOptions {
     };
     /** Explicit color scheme override — bypasses auto-detection from edge colors */
     colorScheme?: 'light' | 'dark';
+    /**
+     * Viewport the screenshot was captured at (logical CSS px). For frameless
+     * browser mockups this drives the frame geometry so the content area matches
+     * the capture aspect ratio — without it, captures taken at a custom preset
+     * viewport get stretched by the fit:'fill' resize into the device config's
+     * logical dimensions. Ignored for devices with a frame asset (their screen
+     * rect is fixed by the asset).
+     */
+    viewport?: {
+        width: number;
+        height: number;
+    };
 }
 export interface ResolvedDeviceFrameDescriptor {
     id: string;

package/dist/mockup.js

@@ -94,6 +94,22 @@ function normalizeBrowserCornerRadius(cornerRadius, dpr) {
     }
     return cornerRadius * dpr;
 }
+// Bounds for capture viewports consumed by mockup geometry. The execution
+// schema only enforces positive integers, so clamp here to keep the physical
+// canvas (logical × outputScale ≤ 4) under sharp's ~32767px dimension limit.
+const MIN_MOCKUP_VIEWPORT_PX = 16;
+const MAX_MOCKUP_VIEWPORT_PX = 7680;
+/** Validate a capture viewport for mockup geometry. Returns null when unusable. */
+function sanitizeMockupViewport(viewport) {
+    const width = viewport?.width;
+    const height = viewport?.height;
+    if (!Number.isFinite(width) || !Number.isFinite(height))
+        return null;
+    if (width <= 0 || height <= 0)
+        return null;
+    const clamp = (value) => Math.max(MIN_MOCKUP_VIEWPORT_PX, Math.min(MAX_MOCKUP_VIEWPORT_PX, Math.round(value)));
+    return { width: clamp(width), height: clamp(height) };
+}
 /**
  * Resolve the orientation config for a given orientation.
  * Prefers per-orientation configs; falls back to rotation logic for legacy format.
@@ -526,9 +542,14 @@ export async function applyDeviceFrame(screenshot, deviceId, options) {
         frameHeight: geometry.frameHeight,
         screenRect: geometry.screenRect,
     };
-    // For frameless browser devices: use device config logical dimensions as reference.
-    // The screenshot is resized to fit the content area (sharp fit:'fill').
-    // This matches how the Studio client renders frameless browsers.
+    // For frameless browser devices: build the frame around the capture viewport
+    // when provided (exact inverse of computeMockupLayout's content-area math, so
+    // the content area maps 1:1 to the screenshot and fit:'fill' cannot distort
+    // captures taken at a custom preset viewport). Without a viewport, fall back
+    // to the device config logical dimensions — this matches how the Studio
+    // client renders frameless browsers, and is identical to the viewport path
+    // for captures taken at the device's default viewport (logical − safe areas,
+    // see resolveDeviceViewport in capture-request-plan.ts).
     // Safari uses a 52px visible toolbar (cropped from the 88px asset);
     // Chrome uses a two-row 86px toolbar.
     const BROWSER_BAR_HEIGHT = resolved.browserStyle === 'safari' ? 52 : 86;
@@ -539,11 +560,20 @@ export async function applyDeviceFrame(screenshot, deviceId, options) {
         const safeAreaTop = normalizeBrowserSafeAreaTop(resolved.safeArea.top, 1, // logical pixels — pixelScale (os) handles final scaling
         BROWSER_BAR_HEIGHT);
         resolved.safeArea = { ...resolved.safeArea, top: safeAreaTop };
-        // Frame = device config logical dimensions (not screenshot dimensions)
-        geo.frameWidth = logicalW;
-        geo.frameHeight = logicalH;
-        geo.screenRect = { x: 0, y: 0, width: logicalW, height: logicalH };
-        logger.debug(`[mockup]   frameless browser: logicalW=${logicalW}, logicalH=${logicalH}, os=${os}, geo=${geo.frameWidth}x${geo.frameHeight}`);
+        const captureViewport = sanitizeMockupViewport(opts.viewport);
+        if (captureViewport) {
+            geo.frameWidth = captureViewport.width
+                + ((resolved.safeArea.left ?? 0) + (resolved.safeArea.right ?? 0)) * scale;
+            geo.frameHeight = captureViewport.height
+                + (safeAreaTop + (resolved.safeArea.bottom ?? 0)) * scale;
+        }
+        else {
+            // Frame = device config logical dimensions (not screenshot dimensions)
+            geo.frameWidth = logicalW;
+            geo.frameHeight = logicalH;
+        }
+        geo.screenRect = { x: 0, y: 0, width: geo.frameWidth, height: geo.frameHeight };
+        logger.debug(`[mockup]   frameless browser: logicalW=${logicalW}, logicalH=${logicalH}, viewport=${captureViewport ? `${captureViewport.width}x${captureViewport.height}` : 'none'}, os=${os}, geo=${geo.frameWidth}x${geo.frameHeight}`);
     }
     else if (!hasFrame && geo.frameWidth === 0 && geo.frameHeight === 0) {
         // Non-browser frameless fallback

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autokap",
-  "version": "1.8.4",
+  "version": "1.8.6",
   "description": "AI-powered CLI tool for capturing clean screenshots of websites",
   "type": "module",
   "main": "./dist/index.js",