codeplay-common 4.3.3 → 4.3.5

package/files/{take-responsive-screenshot.js → take-screen-image.js}

@@ -3,9 +3,12 @@ const path = require('node:path');
 const readline = require('node:readline/promises');
 const { spawn, spawnSync } = require('node:child_process');
 
-const screenshotDirectory = path.join(__dirname, 'Auto-Screenshot', 'Responsive');
-const inFrameDirectory = path.join(__dirname, 'Auto-Screenshot', 'In-Frame');
-const capacitorConfigPath = path.join(__dirname, 'capacitor.config.json');
+const screenshotDirectory = path.join(__dirname, 'Auto-Screenshot', 'Store-image-Screenshot');
+const inFrameDirectory = path.join(__dirname, 'Auto-Screenshot', 'Store-image-Frame');
+const amazonAssetsDirectory = path.join(__dirname, 'Auto-Screenshot', 'Amazon-assets');
+const samsungAssetsDirectory = path.join(__dirname, 'Auto-Screenshot', 'Samsung-assets');
+const capacitorConfigPath = path.join(__dirname, 'capacitor.config.json');
+const amazonIconPath = path.join(__dirname, 'resources', 'icon-only.png');
 const temporaryDirectory = path.join(__dirname, 'agent-temp');
 const browserExecutablePaths = [
   'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
@@ -21,20 +24,33 @@ const deviceProfiles = [
     outputDirectory: 'Android',
     frameType: 'android-phone',
     width: 360,
-    height: 800,
-    deviceScaleFactor: 3,
-    mobile: true,
+    height: 800,
+    deviceScaleFactor: 3,
+    orientationSensitive: true,
+    mobile: true,
   },
-  {
-    name: 'android-tablet',
-    label: 'Android tablet',
+  {
+    name: 'android-tablet',
+    label: 'Android tablet',
     outputDirectory: 'Android-Tab',
     frameType: 'tablet',
     width: 800,
-    height: 1280,
-    deviceScaleFactor: 2,
-    mobile: true,
-  },
+    height: 1280,
+    deviceScaleFactor: 2,
+    orientationSensitive: true,
+    mobile: true,
+  },
+  {
+    name: 'android-tablet-10-inch',
+    label: 'Android 10-inch Play Store tablet',
+    outputDirectory: 'Android-Tab-10-Inch',
+    frameType: 'tablet',
+    width: 720,
+    height: 1280,
+    deviceScaleFactor: 2,
+    orientationSensitive: true,
+    mobile: true,
+  },
   {
     name: 'iphone',
     label: 'iPhone 6.9-inch App Store viewport',
@@ -45,6 +61,7 @@ const deviceProfiles = [
     deviceScaleFactor: 3,
     framedWidth: 1284,
     framedHeight: 2778,
+    orientationSensitive: true,
     mobile: true,
   },
   {
@@ -57,17 +74,55 @@ const deviceProfiles = [
     deviceScaleFactor: 2,
     framedWidth: 2048,
     framedHeight: 2732,
+    orientationSensitive: true,
     mobile: true,
-  },
+  },
+  {
+    name: 'apple-vision-pro',
+    label: 'Apple Vision Pro',
+    outputDirectory: 'Apple-Vision-Pro',
+    frameType: 'apple-vision-pro',
+    width: 3840,
+    height: 2160,
+    deviceScaleFactor: 1,
+    framedWidth: 3840,
+    framedHeight: 2160,
+    mobile: false,
+  },
+  {
+    name: 'apple-tv',
+    label: 'Apple TV',
+    outputDirectory: 'Apple-TV',
+    frameType: 'apple-tv',
+    width: 1920,
+    height: 1080,
+    deviceScaleFactor: 1,
+    framedWidth: 1920,
+    framedHeight: 1080,
+    mobile: false,
+  },
+  {
+    name: 'apple-watch',
+    label: 'Apple Watch Ultra 3',
+    outputDirectory: 'Apple-Watch',
+    frameType: 'apple-watch',
+    width: 422,
+    height: 514,
+    deviceScaleFactor: 1,
+    framedWidth: 422,
+    framedHeight: 514,
+    mobile: true,
+  },
   {
     name: 'amazon-mobile',
     label: 'Amazon mobile store viewport',
     outputDirectory: 'Amazon-Phone',
     frameType: 'android-phone',
     width: 360,
-    height: 640,
-    deviceScaleFactor: 3,
-    mobile: true,
+    height: 640,
+    deviceScaleFactor: 3,
+    orientationSensitive: true,
+    mobile: true,
   },
   {
     name: 'amazon-fire-tablet',
@@ -75,9 +130,10 @@ const deviceProfiles = [
     outputDirectory: 'Amazon-Tab',
     frameType: 'tablet',
     width: 800,
-    height: 1280,
-    deviceScaleFactor: 2,
-    mobile: true,
+    height: 1280,
+    deviceScaleFactor: 2,
+    orientationSensitive: true,
+    mobile: true,
   },
   {
     name: 'amazon-fire-tv',
@@ -99,16 +155,16 @@ const deviceProfiles = [
     deviceScaleFactor: 1,
     mobile: false,
   },
-  {
-    name: 'chromebook',
-    label: 'Chromebook-sized viewport',
-    outputDirectory: 'Chromebook',
-    frameType: 'laptop',
-    width: 1366,
-    height: 768,
-    deviceScaleFactor: 1,
-    mobile: false,
-  },
+  {
+    name: 'chromebook',
+    label: 'Chromebook Play Store viewport',
+    outputDirectory: 'Chromebook',
+    frameType: 'laptop',
+    width: 1920,
+    height: 1080,
+    deviceScaleFactor: 1,
+    mobile: false,
+  },
   {
     name: 'android-xr',
     label: 'Android XR 2D panel approximation',
@@ -139,7 +195,7 @@ function getConfiguredOrientation() {
 }
 
 function orientProfile(profile, orientation) {
-  if (orientation !== 'landscape') {
+  if (orientation !== 'landscape' || !profile.orientationSensitive) {
     return profile;
   }
 
@@ -297,7 +353,9 @@ function getScreenshotFileName(fileNameInput, selectedProfiles) {
 
 function parseArguments() {
   const args = process.argv.slice(2);
-  const options = {
+  const options = {
+    amazonAssets: false,
+    samsungAssets: false,
     dryRun: false,
     frameExisting: false,
     help: false,
@@ -309,7 +367,11 @@ function parseArguments() {
   for (let index = 0; index < args.length; index += 1) {
     const argument = args[index];
 
-    if (argument === '--dry-run') {
+    if (argument === '--amazon-assets') {
+      options.amazonAssets = true;
+    } else if (argument === '--samsung-assets') {
+      options.samsungAssets = true;
+    } else if (argument === '--dry-run') {
       options.dryRun = true;
     } else if (argument === '--frame-existing') {
       options.frameExisting = true;
@@ -353,12 +415,14 @@ function printHelp() {
   console.log('Capture the current live Android WebView at multiple responsive viewport sizes.');
   console.log('');
   console.log('Usage:');
-  console.log('  node take-responsive-screenshot.js');
-  console.log('  node take-responsive-screenshot.js --profiles iphone,ipad');
-  console.log('  node take-responsive-screenshot.js --prefix home --profiles android-phone,ipad');
-  console.log('  node take-responsive-screenshot.js --frame-existing');
-  console.log('  node take-responsive-screenshot.js --dry-run');
-  console.log('  node take-responsive-screenshot.js --list');
+  console.log('  node take-screen-image.js');
+  console.log('  node take-screen-image.js --profiles iphone,ipad');
+  console.log('  node take-screen-image.js --prefix home --profiles android-phone,ipad');
+  console.log('  node take-screen-image.js --frame-existing');
+  console.log('  node take-screen-image.js --amazon-assets');
+  console.log('  node take-screen-image.js --samsung-assets');
+  console.log('  node take-screen-image.js --dry-run');
+  console.log('  node take-screen-image.js --list');
 }
 
 function selectProfiles(input) {
@@ -802,7 +866,7 @@ async function waitForReplayLayout(client, snapshot) {
   });
 }
 
-function getFrameAdornment(frameType) {
+function getFrameAdornment(frameType) {
   if (frameType === 'iphone') {
     return '<div class="dynamic-island"></div>';
   }
@@ -815,9 +879,17 @@ function getFrameAdornment(frameType) {
     return '<div class="tablet-camera"></div>';
   }
 
-  if (frameType === 'tv') {
-    return '<div class="tv-stand"></div>';
-  }
+  if (frameType === 'tv' || frameType === 'apple-tv') {
+    return '<div class="tv-stand"></div>';
+  }
+
+  if (frameType === 'apple-watch') {
+    return '<div class="watch-crown"></div><div class="watch-button"></div>';
+  }
+
+  if (frameType === 'apple-vision-pro') {
+    return '<div class="vision-sensor vision-sensor-left"></div><div class="vision-sensor vision-sensor-right"></div>';
+  }
 
   if (frameType === 'laptop') {
     return '<div class="laptop-camera"></div><div class="laptop-base"></div>';
@@ -826,7 +898,7 @@ function getFrameAdornment(frameType) {
   return '<div class="xr-status"></div>';
 }
 
-function createDeviceFrameHtml(profile, screenshotBuffer) {
+function createDeviceFrameHtml(profile, screenshotBuffer) {
   const screenshotDataUrl = `data:image/png;base64,${screenshotBuffer.toString('base64')}`;
   const aspectRatio = `${profile.width} / ${profile.height}`;
 
@@ -922,9 +994,64 @@ function createDeviceFrameHtml(profile, screenshotBuffer) {
       padding: 1.05%;
       border-radius: clamp(18px, 3.2vw, 48px);
     }
-    .device.tablet .screen {
-      border-radius: clamp(13px, 2.5vw, 38px);
-    }
+    .device.tablet .screen {
+      border-radius: clamp(13px, 2.5vw, 38px);
+    }
+    .device.apple-watch {
+      height: 82%;
+      padding: 2.2%;
+      border: clamp(3px, 1.4vw, 7px) solid #8b929b;
+      border-radius: 24% / 20%;
+      background: linear-gradient(145deg, #d5d8dc, #363b43 28%, #11151b 72%, #9299a2);
+    }
+    .device.apple-watch .screen {
+      border-radius: 20% / 17%;
+    }
+    .watch-crown {
+      position: absolute;
+      top: 24%;
+      right: -5.5%;
+      width: 5.5%;
+      height: 15%;
+      border-radius: 0 45% 45% 0;
+      background: linear-gradient(90deg, #303640, #a8afb7 55%, #424851);
+      box-shadow: 0 0.8vh 1.5vh rgba(0,0,0,0.45);
+    }
+    .watch-button {
+      position: absolute;
+      top: 43%;
+      right: -3.5%;
+      width: 3.5%;
+      height: 11%;
+      border-radius: 0 35% 35% 0;
+      background: #626a74;
+    }
+    .device.apple-vision-pro {
+      width: 82%;
+      padding: 0.72%;
+      border: clamp(4px, 0.45vw, 18px) solid rgba(201, 214, 224, 0.92);
+      border-radius: 14% / 32%;
+      background: linear-gradient(145deg, #dce5eb, #55616d 25%, #151b22 72%, #aebac3);
+      box-shadow:
+        0 5vh 11vh rgba(0,0,0,0.68),
+        0 0 5vh rgba(180,225,255,0.2),
+        0 0 0 1px rgba(255,255,255,0.4) inset;
+    }
+    .device.apple-vision-pro .screen {
+      border-radius: 13% / 29%;
+    }
+    .vision-sensor {
+      position: absolute;
+      z-index: 3;
+      top: 48%;
+      width: clamp(8px, 0.8vw, 30px);
+      aspect-ratio: 1;
+      border-radius: 50%;
+      background: radial-gradient(circle at 38% 35%, #567793, #05080c 55%, #000 75%);
+      box-shadow: 0 0 0 2px rgba(147,166,181,0.55);
+    }
+    .vision-sensor-left { left: 3.2%; }
+    .vision-sensor-right { right: 3.2%; }
     .tablet-camera,
     .laptop-camera {
       position: absolute;
@@ -938,13 +1065,15 @@ function createDeviceFrameHtml(profile, screenshotBuffer) {
       background: #080b10;
       box-shadow: 0 0 0 1px #526071;
     }
-    .device.tv {
-      width: 82%;
+    .device.tv,
+    .device.apple-tv {
+      width: 82%;
       padding: 0.62%;
       border-radius: clamp(8px, 1.1vw, 24px);
       transform: translateY(-4%);
     }
-    .device.tv .screen { border-radius: clamp(4px, 0.55vw, 12px); }
+    .device.tv .screen,
+    .device.apple-tv .screen { border-radius: clamp(4px, 0.55vw, 12px); }
     .tv-stand {
       position: absolute;
       z-index: -1;
@@ -1007,9 +1136,397 @@ function createDeviceFrameHtml(profile, screenshotBuffer) {
     ${getFrameAdornment(profile.frameType)}
   </main>
 </body>
-</html>`;
-}
-
+</html>`;
+}
+
+function escapeHtml(value) {
+  return String(value)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function createAmazonAssetHtml(asset, appName, iconBuffer) {
+  const iconDataUrl = `data:image/png;base64,${iconBuffer.toString('base64')}`;
+  const safeAppName = escapeHtml(appName);
+  const logoMarkup = asset.type === 'featured-logo'
+    ? `<main class="featured-logo"><img src="${iconDataUrl}" /><div><small>POCKET RHYTHM STUDIO</small><strong>${safeAppName}</strong></div></main>`
+    : '';
+  const iconMarkup = asset.type === 'icon'
+    ? `<main class="icon-card"><img src="${iconDataUrl}" /><div><small>MAKE THE NEXT BEAT YOURS</small><strong>${safeAppName}</strong></div></main>`
+    : '';
+  const backgroundMarkup = asset.type.includes('background')
+    ? '<main class="background-art"><div class="pulse pulse-one"></div><div class="pulse pulse-two"></div><div class="equalizer"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><div class="pad-grid"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></main>'
+    : '';
+
+  return `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <style>
+    * { box-sizing: border-box; }
+    html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
+    body {
+      position: relative;
+      font-family: Arial, Helvetica, sans-serif;
+      color: #f8fbff;
+      background: transparent;
+    }
+    body.icon,
+    body.background-image,
+    body.featured-background {
+      background:
+        radial-gradient(circle at 16% 18%, rgba(52, 211, 235, 0.32), transparent 28%),
+        radial-gradient(circle at 82% 82%, rgba(201, 255, 65, 0.24), transparent 30%),
+        linear-gradient(135deg, #24113c 0%, #15152d 48%, #071725 100%);
+    }
+    body.icon::before,
+    body.background-image::before,
+    body.featured-background::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      opacity: 0.22;
+      background-image:
+        linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
+      background-size: 72px 72px;
+    }
+    .icon-card {
+      position: relative;
+      z-index: 2;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 72px;
+      padding: 72px 110px;
+    }
+    .icon-card img {
+      width: 500px;
+      height: 500px;
+      object-fit: contain;
+      border-radius: 104px;
+      box-shadow: 0 38px 80px rgba(0,0,0,0.48), 0 0 70px rgba(52,211,235,0.2);
+    }
+    .icon-card div { display: flex; flex-direction: column; gap: 18px; }
+    .icon-card small,
+    .featured-logo small {
+      color: #35d4eb;
+      font-size: 24px;
+      font-weight: 700;
+      letter-spacing: 7px;
+    }
+    .icon-card strong { font-size: 86px; line-height: 0.96; max-width: 500px; }
+    .featured-logo {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      gap: 24px;
+      padding: 20px 26px;
+      color: #111827;
+    }
+    .featured-logo img {
+      width: 210px;
+      height: 210px;
+      object-fit: contain;
+      border-radius: 44px;
+    }
+    .featured-logo div { display: flex; min-width: 0; flex-direction: column; gap: 8px; }
+    .featured-logo small { font-size: 14px; letter-spacing: 3px; }
+    .featured-logo strong {
+      max-width: 360px;
+      overflow: hidden;
+      color: #ffffff;
+      font-size: 56px;
+      line-height: 1;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      text-shadow: 0 3px 12px rgba(0,0,0,0.75);
+    }
+    .background-art { position: absolute; inset: 0; }
+    .pulse {
+      position: absolute;
+      border: 3px solid rgba(53,212,235,0.28);
+      border-radius: 50%;
+      box-shadow: 0 0 80px rgba(53,212,235,0.15);
+    }
+    .pulse-one { width: 520px; height: 520px; top: -180px; left: -110px; }
+    .pulse-two { width: 620px; height: 620px; right: -180px; bottom: -310px; border-color: rgba(201,255,65,0.22); }
+    .equalizer {
+      position: absolute;
+      left: 8%;
+      top: 50%;
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      height: 44%;
+      transform: translateY(-50%);
+    }
+    .equalizer i { width: 18px; border-radius: 999px; background: #35d4eb; box-shadow: 0 0 25px rgba(53,212,235,0.5); }
+    .equalizer i:nth-child(1), .equalizer i:nth-child(7) { height: 28%; }
+    .equalizer i:nth-child(2), .equalizer i:nth-child(6) { height: 52%; background: #ff5964; }
+    .equalizer i:nth-child(3), .equalizer i:nth-child(5) { height: 76%; background: #ff9f43; }
+    .equalizer i:nth-child(4) { height: 100%; background: #c9ff41; }
+    .pad-grid {
+      position: absolute;
+      right: 7%;
+      top: 50%;
+      display: grid;
+      width: 46%;
+      height: 64%;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 20px;
+      transform: translateY(-50%) perspective(900px) rotateY(-10deg) rotateX(5deg);
+    }
+    .pad-grid i {
+      border: 2px solid rgba(255,255,255,0.17);
+      border-top: 7px solid #35d4eb;
+      border-radius: 22px;
+      background: linear-gradient(145deg, rgba(42,55,75,0.96), rgba(11,18,29,0.96));
+      box-shadow: 0 20px 28px rgba(0,0,0,0.28);
+    }
+    .pad-grid i:nth-child(2), .pad-grid i:nth-child(6) { border-top-color: #ff9f43; }
+    .pad-grid i:nth-child(3), .pad-grid i:nth-child(7) { border-top-color: #c9ff41; }
+    .pad-grid i:nth-child(4), .pad-grid i:nth-child(8) { border-top-color: #ff5964; }
+    .pad-grid i:nth-child(5) { border-top-color: #ac7cff; }
+    body.featured-background .pad-grid { width: 49%; height: 72%; }
+    body.featured-background .equalizer { height: 52%; }
+  </style>
+</head>
+<body class="${asset.type}">
+  ${iconMarkup}
+  ${logoMarkup}
+  ${backgroundMarkup}
+</body>
+</html>`;
+}
+
+async function createAmazonAssets(client) {
+  if (!fs.existsSync(amazonIconPath)) {
+    throw new Error(`Amazon asset source icon was not found: ${amazonIconPath}`);
+  }
+
+  const config = JSON.parse(fs.readFileSync(capacitorConfigPath, 'utf8'));
+  const appName = config.appName || 'App';
+  const iconBuffer = fs.readFileSync(amazonIconPath);
+  const assets = [
+    { fileName: 'icon-1280x720.png', type: 'icon', width: 1280, height: 720 },
+    { fileName: 'background-image-1920x1080.png', type: 'background-image', width: 1920, height: 1080 },
+    { fileName: 'featured-content-logo-640x260.png', type: 'featured-logo', width: 640, height: 260, transparent: true },
+    { fileName: 'featured-content-background-1920x720.png', type: 'featured-background', width: 1920, height: 720 },
+  ];
+
+  fs.mkdirSync(amazonAssetsDirectory, { recursive: true });
+
+  for (const asset of assets) {
+    await client.send('Emulation.setDeviceMetricsOverride', {
+      width: asset.width,
+      height: asset.height,
+      deviceScaleFactor: 1,
+      mobile: false,
+      screenWidth: asset.width,
+      screenHeight: asset.height,
+      positionX: 0,
+      positionY: 0,
+    });
+
+    const frameTree = await client.send('Page.getFrameTree');
+    await client.send('Page.setDocumentContent', {
+      frameId: frameTree.frameTree.frame.id,
+      html: createAmazonAssetHtml(asset, appName, iconBuffer),
+    });
+    await client.send('Runtime.evaluate', {
+      expression: `Promise.all([...document.images].map((image) => image.complete
+        ? Promise.resolve()
+        : new Promise((resolve) => {
+          image.addEventListener('load', resolve, { once: true });
+          image.addEventListener('error', resolve, { once: true });
+        }))).then(() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve))))`,
+      awaitPromise: true,
+      returnByValue: true,
+    });
+
+    const screenshot = await client.send('Page.captureScreenshot', {
+      format: 'png',
+      fromSurface: true,
+      captureBeyondViewport: false,
+      omitBackground: Boolean(asset.transparent),
+    });
+    const outputPath = path.join(amazonAssetsDirectory, asset.fileName);
+    fs.writeFileSync(outputPath, Buffer.from(screenshot.data, 'base64'));
+    console.log(`Saved Amazon asset ${asset.width}x${asset.height}: ${outputPath}`);
+  }
+}
+
+function createSamsungAssetHtml(asset, appName, iconBuffer) {
+  const iconDataUrl = `data:image/png;base64,${iconBuffer.toString('base64')}`;
+  const safeAppName = escapeHtml(appName);
+  const pads = Array.from({ length: 9 }, (_, index) => (
+    `<button><i>0${index + 1}</i><span>${['OPEN', 'CLOSED', 'HIGH', 'CRASH', 'KICK', 'MID', 'RIDE', 'SNARE', 'FLOOR'][index]}</span></button>`
+  )).join('');
+  const content = asset.type === 'edge-screen'
+    ? `<main class="edge-panel"><header><img src="${iconDataUrl}" /><strong>${safeAppName}</strong></header><section>${pads}</section></main>`
+    : `<main class="single-panel"><header><img src="${iconDataUrl}" /><div><small>POCKET RHYTHM</small><strong>${safeAppName}</strong></div></header><div class="single-action"><span>+</span><strong>OPEN STUDIO</strong><small>Tap to start playing</small></div><div class="rhythm"><i></i><i></i><i></i><i></i><i></i></div></main>`;
+
+  return `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <style>
+    * { box-sizing: border-box; }
+    html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
+    body {
+      position: relative;
+      color: #f7fbff;
+      background:
+        radial-gradient(circle at 50% 8%, rgba(53,212,235,0.26), transparent 24%),
+        radial-gradient(circle at 50% 88%, rgba(201,255,65,0.16), transparent 25%),
+        linear-gradient(180deg, #231039, #111729 48%, #071522);
+      font-family: Arial, Helvetica, sans-serif;
+    }
+    body::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      opacity: 0.18;
+      background: repeating-linear-gradient(0deg, transparent 0 79px, rgba(255,255,255,0.08) 80px);
+    }
+    main { position: relative; z-index: 1; width: 100%; height: 100%; }
+    .edge-panel { display: flex; flex-direction: column; padding: 28px 12px; }
+    .edge-panel header { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 230px; }
+    .edge-panel header img { width: 112px; height: 112px; border-radius: 25px; object-fit: contain; }
+    .edge-panel header strong { max-width: 136px; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
+    .edge-panel section { display: grid; flex: 1; grid-template-rows: repeat(9, 1fr); gap: 13px; }
+    .edge-panel button {
+      display: flex;
+      width: 100%;
+      min-height: 0;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      color: #f7fbff;
+      border: 1px solid rgba(255,255,255,0.16);
+      border-top: 5px solid #35d4eb;
+      border-radius: 18px;
+      background: linear-gradient(145deg, rgba(41,55,76,0.98), rgba(10,17,29,0.98));
+      box-shadow: 0 10px 18px rgba(0,0,0,0.3);
+    }
+    .edge-panel button:nth-child(3n+2) { border-top-color: #ff9f43; }
+    .edge-panel button:nth-child(3n) { border-top-color: #c9ff41; }
+    .edge-panel button i { color: #35d4eb; font-size: 14px; font-style: normal; font-weight: 700; }
+    .edge-panel button span { font-size: 12px; font-weight: 700; letter-spacing: 1px; }
+    .single-panel { display: flex; flex-direction: column; align-items: center; padding: 100px 44px; }
+    .single-panel header { display: flex; width: 100%; align-items: center; gap: 24px; }
+    .single-panel header img { width: 160px; height: 160px; border-radius: 36px; object-fit: contain; }
+    .single-panel header div { display: flex; min-width: 0; flex-direction: column; gap: 9px; }
+    .single-panel header small { color: #35d4eb; font-size: 17px; font-weight: 700; letter-spacing: 3px; }
+    .single-panel header strong { overflow: hidden; font-size: 48px; text-overflow: ellipsis; white-space: nowrap; }
+    .single-action {
+      display: flex;
+      width: 100%;
+      height: 880px;
+      margin-top: 380px;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      border: 3px solid rgba(53,212,235,0.5);
+      border-radius: 90px;
+      background: linear-gradient(145deg, rgba(39,53,75,0.96), rgba(8,16,28,0.98));
+      box-shadow: 0 50px 90px rgba(0,0,0,0.42), 0 0 75px rgba(53,212,235,0.16);
+    }
+    .single-action span {
+      display: grid;
+      width: 260px;
+      height: 260px;
+      place-items: center;
+      color: #0d1721;
+      border-radius: 50%;
+      background: linear-gradient(145deg, #35d4eb, #c9ff41);
+      box-shadow: 0 25px 55px rgba(53,212,235,0.3);
+      font-size: 170px;
+      font-weight: 200;
+      line-height: 1;
+    }
+    .single-action strong { margin-top: 65px; font-size: 42px; letter-spacing: 5px; }
+    .single-action small { margin-top: 18px; color: #a9b7c9; font-size: 24px; }
+    .rhythm { display: flex; align-items: center; gap: 18px; height: 300px; margin-top: auto; }
+    .rhythm i { width: 14px; height: 70px; border-radius: 999px; background: #35d4eb; }
+    .rhythm i:nth-child(2), .rhythm i:nth-child(4) { height: 140px; background: #ff5964; }
+    .rhythm i:nth-child(3) { height: 210px; background: #c9ff41; }
+  </style>
+</head>
+<body>${content}</body>
+</html>`;
+}
+
+async function createSamsungAssets(client) {
+  if (!fs.existsSync(amazonIconPath)) {
+    throw new Error(`Samsung asset source icon was not found: ${amazonIconPath}`);
+  }
+
+  const config = JSON.parse(fs.readFileSync(capacitorConfigPath, 'utf8'));
+  const appName = config.appName || 'App';
+  const iconBuffer = fs.readFileSync(amazonIconPath);
+  const assets = [
+    { fileName: 'edge-screen-160x2560.png', type: 'edge-screen', width: 160, height: 2560 },
+    { fileName: 'edge-screen-single-plus-550x2560.png', type: 'edge-screen-single-plus', width: 550, height: 2560 },
+  ];
+  const maximumFileSize = 1024 * 1024;
+
+  fs.mkdirSync(samsungAssetsDirectory, { recursive: true });
+
+  for (const asset of assets) {
+    await client.send('Emulation.setDeviceMetricsOverride', {
+      width: asset.width,
+      height: asset.height,
+      deviceScaleFactor: 1,
+      mobile: false,
+      screenWidth: asset.width,
+      screenHeight: asset.height,
+      positionX: 0,
+      positionY: 0,
+    });
+    const frameTree = await client.send('Page.getFrameTree');
+    await client.send('Page.setDocumentContent', {
+      frameId: frameTree.frameTree.frame.id,
+      html: createSamsungAssetHtml(asset, appName, iconBuffer),
+    });
+    await client.send('Runtime.evaluate', {
+      expression: `Promise.all([...document.images].map((image) => image.complete
+        ? Promise.resolve()
+        : new Promise((resolve) => image.addEventListener('load', resolve, { once: true }))))
+        .then(() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve))))`,
+      awaitPromise: true,
+      returnByValue: true,
+    });
+    const screenshot = await client.send('Page.captureScreenshot', {
+      format: 'png',
+      fromSurface: true,
+      captureBeyondViewport: false,
+    });
+    const outputPath = path.join(samsungAssetsDirectory, asset.fileName);
+    const outputBuffer = Buffer.from(screenshot.data, 'base64');
+
+    if (outputBuffer.length >= maximumFileSize) {
+      throw new Error(
+        `Samsung asset exceeds 1024 KB (${Math.ceil(outputBuffer.length / 1024)} KB): ${asset.fileName}`,
+      );
+    }
+
+    fs.writeFileSync(outputPath, outputBuffer);
+    console.log(
+      `Saved Samsung asset ${asset.width}x${asset.height} `
+      + `(${Math.ceil(outputBuffer.length / 1024)} KB): ${outputPath}`,
+    );
+  }
+}
+
 async function captureFramedScreenshot(
   client,
   screenshotBuffer,
@@ -1225,8 +1742,13 @@ async function runInteractiveCaptureLoop(
   console.log('\nResponsive screenshot tool closed.');
 }
 
-async function getInteractiveOptions(options) {
-  if (!process.stdin.isTTY || options.dryRun) {
+async function getInteractiveOptions(options) {
+  if (
+    !process.stdin.isTTY
+    || options.dryRun
+    || options.amazonAssets
+    || options.samsungAssets
+  ) {
     return options;
   }
 
@@ -1263,9 +1785,43 @@ async function main() {
     return;
   }
 
-  options = await getInteractiveOptions(options);
-
-  const selectedProfiles = selectProfiles(options.profiles);
+  options = await getInteractiveOptions(options);
+
+  if (options.amazonAssets) {
+    let amazonBrowser;
+    let amazonClient;
+
+    try {
+      amazonBrowser = await launchReplayBrowser();
+      amazonClient = await createReplayPage(amazonBrowser);
+      await createAmazonAssets(amazonClient);
+    } finally {
+      if (amazonClient) amazonClient.close();
+      if (amazonBrowser) await closeReplayBrowser(amazonBrowser);
+    }
+
+    console.log(`Amazon asset creation completed: ${amazonAssetsDirectory}`);
+    return;
+  }
+
+  if (options.samsungAssets) {
+    let samsungBrowser;
+    let samsungClient;
+
+    try {
+      samsungBrowser = await launchReplayBrowser();
+      samsungClient = await createReplayPage(samsungBrowser);
+      await createSamsungAssets(samsungClient);
+    } finally {
+      if (samsungClient) samsungClient.close();
+      if (samsungBrowser) await closeReplayBrowser(samsungBrowser);
+    }
+
+    console.log(`Samsung asset creation completed: ${samsungAssetsDirectory}`);
+    return;
+  }
+
+  const selectedProfiles = selectProfiles(options.profiles);
 
   if (options.frameExisting) {
     await frameExistingScreenshots(selectedProfiles);