edsger 0.33.3 → 0.33.4

package/dist/phases/app-store-generation/screenshot-composer.js

@@ -88,12 +88,10 @@ function createCompositionHtml(framedScreenshotDataUrl, spec, targetWidth, targe
     align-items: flex-start;
     justify-content: center;
     overflow: hidden;
-    padding: 0 ${Math.round(targetWidth * 0.05)}px;
+    padding: 0 ${Math.round(targetWidth * 0.02)}px;
   }
   .device-area img {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
+    width: 92%;
   }
 </style>
 </head>
@@ -151,11 +149,11 @@ function createCompositionHtml(framedScreenshotDataUrl, spec, targetWidth, targe
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    padding: ${Math.round(targetHeight * 0.05)}px;
+    padding: ${Math.round(targetHeight * 0.03)}px;
   }
   .device-area img {
     max-width: 100%;
-    max-height: 100%;
+    max-height: 95%;
     object-fit: contain;
   }
 </style>
@@ -236,13 +234,17 @@ export async function generateStoreScreenshots(specs, options) {
                 continue;
             }
             // Step 2: Wrap in device frame
+            // Use tight canvas dimensions so the device fills most of the frame image.
+            // This prevents excess padding that would make the device appear small in composition.
             const rawDataUrl = `data:image/png;base64,${rawScreenshotBuffer.toString('base64')}`;
+            const frameWidth = deviceFrame === 'iphone' ? 500 : 1600;
+            const frameHeight = deviceFrame === 'iphone' ? 1050 : 1000;
             const frameHtml = generateDeviceFrameHtml(rawDataUrl, deviceFrame, {
                 background: 'transparent',
                 shadow: true,
+                canvasWidth: frameWidth,
+                canvasHeight: frameHeight,
             });
-            const frameWidth = deviceFrame === 'iphone' ? 800 : 1600;
-            const frameHeight = deviceFrame === 'iphone' ? 1200 : 1000;
             let framedBuffer;
             try {
                 const frameContext = await browser.newContext({
@@ -255,6 +257,7 @@ export async function generateStoreScreenshots(specs, options) {
                 framedBuffer = await framePage.screenshot({
                     type: 'png',
                     fullPage: false,
+                    omitBackground: true,
                 });
                 await frameContext.close();
             }

package/dist/services/video/device-frames.d.ts

@@ -27,4 +27,8 @@ export declare function generateDeviceFrameHtml(screenshotDataUrl: string, devic
     browserTitle?: string;
     /** URL to show in the browser address bar (browser frame only) */
     browserUrl?: string;
+    /** Custom canvas width (defaults vary by device type) */
+    canvasWidth?: number;
+    /** Custom canvas height (defaults vary by device type) */
+    canvasHeight?: number;
 }): string;

package/dist/services/video/device-frames.js

@@ -17,27 +17,27 @@ export const DEVICE_PRESETS = {
  * @param options - additional customization options
  */
 export function generateDeviceFrameHtml(screenshotDataUrl, deviceType, options) {
-    const { background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', shadow = true, browserTitle = 'Edsger', browserUrl = 'app.edsger.ai', } = options || {};
+    const { background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', shadow = true, browserTitle = 'Edsger', browserUrl = 'app.edsger.ai', canvasWidth, canvasHeight, } = options || {};
     switch (deviceType) {
         case 'macbook':
-            return generateMacBookFrame(screenshotDataUrl, background, shadow);
+            return generateMacBookFrame(screenshotDataUrl, background, shadow, canvasWidth ?? 1600, canvasHeight ?? 1000);
         case 'iphone':
-            return generateIPhoneFrame(screenshotDataUrl, background, shadow);
+            return generateIPhoneFrame(screenshotDataUrl, background, shadow, canvasWidth ?? 800, canvasHeight ?? 1200);
         case 'browser':
-            return generateBrowserFrame(screenshotDataUrl, background, shadow, browserTitle, browserUrl);
+            return generateBrowserFrame(screenshotDataUrl, background, shadow, browserTitle, browserUrl, canvasWidth ?? 1600, canvasHeight ?? 1000);
         case 'none':
             return generatePlainFrame(screenshotDataUrl, background);
     }
 }
-function generateMacBookFrame(screenshotDataUrl, background, shadow) {
+function generateMacBookFrame(screenshotDataUrl, background, shadow, canvasWidth, canvasHeight) {
     return `<!DOCTYPE html>
 <html>
 <head>
 <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
   body {
-    width: 1600px;
-    height: 1000px;
+    width: ${canvasWidth}px;
+    height: ${canvasHeight}px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -118,15 +118,15 @@ function generateMacBookFrame(screenshotDataUrl, background, shadow) {
 </body>
 </html>`;
 }
-function generateIPhoneFrame(screenshotDataUrl, background, shadow) {
+function generateIPhoneFrame(screenshotDataUrl, background, shadow, canvasWidth, canvasHeight) {
     return `<!DOCTYPE html>
 <html>
 <head>
 <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
   body {
-    width: 800px;
-    height: 1200px;
+    width: ${canvasWidth}px;
+    height: ${canvasHeight}px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -234,15 +234,15 @@ function generateIPhoneFrame(screenshotDataUrl, background, shadow) {
 </body>
 </html>`;
 }
-function generateBrowserFrame(screenshotDataUrl, background, shadow, title, url) {
+function generateBrowserFrame(screenshotDataUrl, background, shadow, title, url, canvasWidth, canvasHeight) {
     return `<!DOCTYPE html>
 <html>
 <head>
 <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
   body {
-    width: 1600px;
-    height: 1000px;
+    width: ${canvasWidth}px;
+    height: ${canvasHeight}px;
     display: flex;
     align-items: center;
     justify-content: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "edsger",
-  "version": "0.33.3",
+  "version": "0.33.4",
   "type": "module",
   "bin": {
     "edsger": "dist/index.js"