device-shots 0.2.0 → 0.3.0

package/README.md

@@ -117,10 +117,10 @@ Screenshots are organized by platform and screen size bucket, matching App Store
 │   │   ├── dashboard_framed.png
 │   │   ├── settings.png
 │   │   └── settings_framed.png
-│   ├── 6.7/                          # iPhone 16 Plus, 15 Pro Max
+│   ├── 6.5/                          # iPhone 14 Plus, 13 Pro Max
 │   │   ├── dashboard.png
 │   │   └── dashboard_framed.png
-│   └── 6.3/                          # iPhone 16 Pro
+│   └── 6.3/                          # iPhone 16 Pro, 16, 15 Pro, 15
 │       └── ...
 ├── android/
 │   └── phone/                        # Pixel 9 Pro, etc.
@@ -135,14 +135,14 @@ Screenshots are organized by platform and screen size bucket, matching App Store
 
 | Bucket | Devices |
 |--------|---------|
-| `6.9` | iPhone 16 Pro Max |
-| `6.7` | iPhone 16 Plus, 15 Pro Max, 15 Plus, 14 Pro Max |
-| `6.5` | iPhone 14 Plus, 13 Pro Max, 12 Pro Max, 11 Pro Max |
-| `6.3` | iPhone 16 Pro |
-| `6.1` | iPhone 16, 15, 15 Pro, 14, 14 Pro, 13, 13 Pro |
+| `6.9` | iPhone 16 Pro Max, 16 Plus, 15 Pro Max, 15 Plus, 14 Pro Max |
+| `6.5` | iPhone 14 Plus, 13 Pro Max, 12 Pro Max, 11 Pro Max, XS Max |
+| `6.3` | iPhone 16 Pro, 16, 15 Pro, 15, 14 Pro |
+| `6.1` | iPhone 14, 13, 12, X, XS, 12 mini, 13 mini |
 | `5.5` | iPhone 8 Plus, 7 Plus |
-| `13` | iPad Pro 13" |
-| `11` | iPad Pro 11", iPad Air |
+| `4.7` | iPhone SE (3rd/2nd), iPhone 8 |
+| `13` | iPad Pro 13", iPad Air 13" |
+| `11` | iPad Pro 11", iPad Air 11", iPad mini 6th gen |
 
 **Android** — Categorized by form factor:
 

package/dist/index.js

@@ -96,35 +96,40 @@ async function runOrFail(cmd, args, options) {
 
 // src/devices/screen-sizes.ts
 var IOS_RESOLUTION_MAP = {
-  // 6.9" — iPhone 16 Pro Max
+  // 6.9" — iPhone 16 Pro Max, 16 Plus, 15 Pro Max, 15 Plus, 14 Pro Max
   "1320x2868": "6.9",
-  // 6.7" — iPhone 16 Plus, 15 Pro Max, 15 Plus, 14 Pro Max
-  "1290x2796": "6.7",
-  // 6.5" — iPhone 14 Plus, 13 Pro Max, 12 Pro Max, 11 Pro Max
+  "1290x2796": "6.9",
+  "1260x2736": "6.9",
+  // 6.5" — iPhone 14 Plus, 13 Pro Max, 12 Pro Max, 11 Pro Max, XS Max, XR
   "1284x2778": "6.5",
   "1242x2688": "6.5",
-  // 6.3" — iPhone 16 Pro
+  // 6.3" — iPhone 16 Pro, 16, 15 Pro, 15, 14 Pro
   "1206x2622": "6.3",
-  // 6.1" — iPhone 16, 15, 15 Pro, 14, 14 Pro, 13, 13 Pro, 12, 12 Pro
-  "1179x2556": "6.1",
+  "1179x2556": "6.3",
+  // 6.1" — iPhone 14, 13, 13 Pro, 12, 12 Pro, X, XS, 11 Pro, 12 mini, 13 mini
   "1170x2532": "6.1",
-  // 5.8" — iPhone X, XS, 11 Pro
-  "1125x2436": "5.8",
+  "1125x2436": "6.1",
+  "1080x2340": "6.1",
   // 5.5" — iPhone 8 Plus, 7 Plus, 6s Plus
   "1242x2208": "5.5",
   // 4.7" — iPhone SE (3rd/2nd), iPhone 8, 7, 6s
   "750x1334": "4.7",
-  // iPad 13" — iPad Pro 13" (M4), iPad Pro 12.9" (older)
+  // 4.0" — iPhone SE (1st), iPhone 5/5s/5c
+  "640x1136": "4.0",
+  "640x1096": "4.0",
+  // iPad 13" — iPad Pro 13" (M4/M3/M2/M1), iPad Air 13", iPad Pro 12.9" (older)
   "2064x2752": "13",
   "2048x2732": "13",
-  // iPad 11" — iPad Pro 11", iPad Air
+  // iPad 11" — iPad Pro 11", iPad Air 11", iPad 10th gen, iPad mini 6th gen
+  "1488x2266": "11",
+  "1668x2420": "11",
   "1668x2388": "11",
-  "1668x2224": "11",
   "1640x2360": "11",
-  // iPad 10.9" — iPad Air (5th), iPad (10th)
-  "2360x1640": "11",
-  // iPad mini
-  "1488x2266": "8.3"
+  // iPad 10.5" — iPad Pro 10.5", iPad Air 3rd gen, iPad 7th-9th gen
+  "1668x2224": "10.5",
+  // iPad 9.7" — iPad Pro 9.7", iPad Air 1-2, older iPad mini
+  "1536x2048": "9.7",
+  "1536x2008": "9.7"
 };
 function getIosScreenSize(width, height) {
   const w = Math.min(width, height);
@@ -485,6 +490,64 @@ async function frameScreenshots(inputDir, outputDir, force = false) {
   const rawFiles = existsSync3(inputDir) ? readdirSync(inputDir).filter((f) => f.endsWith(".png")).length : 0;
   return { framed: framedFiles, skipped: rawFiles - framedFiles };
 }
+async function frameAndroidScreenshot(inputPath, outputPath) {
+  if (!await commandExists("magick")) {
+    throw new Error("ImageMagick is required for Android framing. Install with: brew install imagemagick");
+  }
+  const { stdout: identify } = await run("magick", [
+    "identify",
+    "-format",
+    "%wx%h",
+    inputPath
+  ]);
+  const match = identify.match(/(\d+)x(\d+)/);
+  if (!match) return false;
+  const width = parseInt(match[1], 10);
+  const height = parseInt(match[2], 10);
+  const borderWidth = Math.round(width * 0.018);
+  const innerRadius = Math.round(width * 0.045);
+  const outerRadius = innerRadius + borderWidth;
+  const totalW = width + borderWidth * 2;
+  const totalH = height + borderWidth * 2;
+  try {
+    await runOrFail("magick", [
+      // Create black rounded rectangle background
+      "-size",
+      `${totalW}x${totalH}`,
+      "xc:none",
+      "-draw",
+      `fill black roundrectangle 0,0 ${totalW - 1},${totalH - 1} ${outerRadius},${outerRadius}`,
+      // Load screenshot and round its corners
+      "(",
+      inputPath,
+      "-alpha",
+      "set",
+      "(",
+      "+clone",
+      "-alpha",
+      "extract",
+      "-draw",
+      `fill black color 0,0 reset`,
+      "-draw",
+      `fill white roundrectangle 0,0 ${width - 1},${height - 1} ${innerRadius},${innerRadius}`,
+      ")",
+      "-compose",
+      "DstIn",
+      "-composite",
+      ")",
+      // Composite screenshot centered on black background
+      "-gravity",
+      "center",
+      "-compose",
+      "Over",
+      "-composite",
+      outputPath
+    ]);
+    return true;
+  } catch {
+    return false;
+  }
+}
 async function frameAllIosScreenshots(screenshotsDir, force = false) {
   const iosDir = join3(screenshotsDir, "ios");
   if (!existsSync3(iosDir)) return 0;
@@ -503,6 +566,29 @@ async function frameAllIosScreenshots(screenshotsDir, force = false) {
   }
   return totalFramed;
 }
+async function frameAllAndroidScreenshots(screenshotsDir, force = false) {
+  if (!await commandExists("magick")) return 0;
+  const androidDir = join3(screenshotsDir, "android");
+  if (!existsSync3(androidDir)) return 0;
+  let totalFramed = 0;
+  const sizeDirs = readdirSync(androidDir, { withFileTypes: true }).filter(
+    (d) => d.isDirectory()
+  );
+  for (const sizeDir of sizeDirs) {
+    const dirPath = join3(androidDir, sizeDir.name);
+    const rawFiles = readdirSync(dirPath).filter(
+      (f) => f.endsWith(".png") && !f.includes("_framed")
+    );
+    for (const file of rawFiles) {
+      const inputPath = join3(dirPath, file);
+      const outputPath = join3(dirPath, file.replace(".png", "_framed.png"));
+      if (!force && existsSync3(outputPath)) continue;
+      const success = await frameAndroidScreenshot(inputPath, outputPath);
+      if (success) totalFramed++;
+    }
+  }
+  return totalFramed;
+}
 
 // src/commands/capture.ts
 async function captureCommand(options) {
@@ -654,16 +740,33 @@ Detected ${devices.length} device(s) with ${bundleId}:`)
 Captured ${captured.length} screenshot(s) as '${screenshotName}'.`
     )
   );
-  if (shouldFrame && iosDevices.length > 0) {
-    console.log("");
-    const s = ora("Framing iOS screenshots...").start();
-    try {
-      const framed = await frameAllIosScreenshots(outputDir);
-      s.succeed(`Framed ${framed} screenshot(s)`);
-    } catch (error) {
-      s.fail(
-        `Framing failed: ${error instanceof Error ? error.message : error}`
-      );
+  if (shouldFrame) {
+    if (iosDevices.length > 0) {
+      console.log("");
+      const s = ora("Framing iOS screenshots...").start();
+      try {
+        const framed = await frameAllIosScreenshots(outputDir);
+        s.succeed(`Framed ${framed} iOS screenshot(s)`);
+      } catch (error) {
+        s.fail(
+          `iOS framing failed: ${error instanceof Error ? error.message : error}`
+        );
+      }
+    }
+    if (androidDevices.length > 0) {
+      const s = ora("Framing Android screenshots...").start();
+      try {
+        const framed = await frameAllAndroidScreenshots(outputDir);
+        if (framed > 0) {
+          s.succeed(`Framed ${framed} Android screenshot(s)`);
+        } else {
+          s.info("Android framing skipped (ImageMagick not found)");
+        }
+      } catch (error) {
+        s.fail(
+          `Android framing failed: ${error instanceof Error ? error.message : error}`
+        );
+      }
     }
   }
 }
@@ -706,23 +809,32 @@ import pc2 from "picocolors";
 async function frameCommand(dir, options) {
   const config = await loadConfig();
   const screenshotsDir = dir || options.input || config.output;
-  console.log(pc2.bold(`Framing iOS screenshots in ${screenshotsDir}...`));
-  const spinner = ora2("Setting up Python environment...").start();
+  console.log(pc2.bold(`Framing screenshots in ${screenshotsDir}...`));
+  const iosSpinner = ora2("Framing iOS screenshots (device bezels)...").start();
   try {
-    const framed = await frameAllIosScreenshots(
-      screenshotsDir,
-      options.force
+    const framed = await frameAllIosScreenshots(screenshotsDir, options.force);
+    if (framed > 0) {
+      iosSpinner.succeed(`Framed ${framed} iOS screenshot(s)`);
+    } else {
+      iosSpinner.info("No new iOS screenshots to frame");
+    }
+  } catch (error) {
+    iosSpinner.fail(
+      `iOS framing failed: ${error instanceof Error ? error.message : error}`
     );
+  }
+  const androidSpinner = ora2("Framing Android screenshots (black border)...").start();
+  try {
+    const framed = await frameAllAndroidScreenshots(screenshotsDir, options.force);
     if (framed > 0) {
-      spinner.succeed(`Framed ${framed} screenshot(s)`);
+      androidSpinner.succeed(`Framed ${framed} Android screenshot(s)`);
     } else {
-      spinner.info("No new screenshots to frame");
+      androidSpinner.info("No new Android screenshots to frame");
     }
   } catch (error) {
-    spinner.fail(
-      `Framing failed: ${error instanceof Error ? error.message : error}`
+    androidSpinner.fail(
+      `Android framing failed: ${error instanceof Error ? error.message : error}`
     );
-    process.exit(1);
   }
 }
 
@@ -730,7 +842,7 @@ async function frameCommand(dir, options) {
 var program = new Command();
 program.name("device-shots").description(
   "Capture and frame mobile app screenshots from iOS simulators and Android emulators"
-).version("0.2.0");
+).version("0.3.0");
 program.command("capture").description("Capture screenshots from running devices").argument("[name]", "Screenshot name").option("-b, --bundle-id <id>", "App bundle ID").option("-o, --output <dir>", "Output directory").option("-p, --platform <platform>", "ios, android, or both").option("--no-frame", "Skip framing after capture").option("--time <time>", "Status bar time", "9:41").action(async (name, opts) => {
   await captureCommand({ name, ...opts });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "device-shots",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Capture and frame mobile app screenshots from iOS simulators and Android emulators",
   "type": "module",
   "bin": {