codeplay-common 4.7.5 → 4.7.7

package/files/scripts-screenshot/screenshot/background-decorations.js

@@ -1,120 +1,120 @@
-const decorationShapes = Object.freeze({
-  ring: { className: 'ring', scale: 1, opacity: 0.28 },
-  doubleRing: { className: 'double-ring', scale: 1.08, opacity: 0.24 },
-  pill: { className: 'pill', scale: 1.15, opacity: 0.22 },
-  dots: { className: 'dots', scale: 0.72, opacity: 0.25 },
-  sparkle: { className: 'sparkle', scale: 0.72, opacity: 0.25 },
-  diamond: { className: 'diamond', scale: 0.78, opacity: 0.2 },
-  triangle: { className: 'triangle', scale: 0.8, opacity: 0.2 },
-  hexagon: { className: 'hexagon', scale: 0.9, opacity: 0.2 },
-  squircle: { className: 'squircle', scale: 0.9, opacity: 0.2 },
-  plus: { className: 'plus', scale: 0.7, opacity: 0.22 },
-  chevron: { className: 'chevron', scale: 0.82, opacity: 0.24 },
-  orbit: { className: 'orbit', scale: 1.25, opacity: 0.25 },
-  bars: { className: 'bars', scale: 0.82, opacity: 0.2 },
-  flower: { className: 'flower', scale: 0.8, opacity: 0.2 },
-  crescent: { className: 'crescent', scale: 0.82, opacity: 0.22 },
-  wave: { className: 'wave', scale: 1.18, opacity: 0.24 },
-  cube: { className: 'cube', scale: 0.88, opacity: 0.18 },
-  burst: { className: 'burst', scale: 0.72, opacity: 0.2 },
-});
-
-const decorationSets = Object.freeze([
-  ['ring', 'sparkle', 'pill', 'dots', 'diamond', 'orbit'],
-  ['doubleRing', 'triangle', 'bars', 'crescent', 'sparkle', 'pill'],
-  ['hexagon', 'wave', 'dots', 'plus', 'ring', 'flower'],
-  ['squircle', 'orbit', 'chevron', 'burst', 'pill', 'diamond'],
-  ['flower', 'doubleRing', 'cube', 'dots', 'wave', 'plus'],
-  ['crescent', 'sparkle', 'hexagon', 'bars', 'ring', 'chevron'],
-  ['cube', 'pill', 'burst', 'orbit', 'triangle', 'dots'],
-  ['wave', 'diamond', 'flower', 'doubleRing', 'squircle', 'sparkle'],
-]);
-
-const safeAnchors = Object.freeze([
-  [5, 11],
-  [91, 13],
-  [5, 38],
-  [92, 42],
-  [6, 70],
-  [91, 73],
-  [12, 91],
-  [85, 90],
-]);
-
-function getDecorationSeed(value) {
-  let hash = 2166136261;
-  for (const character of String(value)) {
-    hash ^= character.charCodeAt(0);
-    hash = Math.imul(hash, 16777619);
-  }
-  return hash >>> 0;
-}
-
-function createSeededRandom(seed) {
-  let state = seed >>> 0;
-  return () => {
-    state += 0x6D2B79F5;
-    let value = state;
-    value = Math.imul(value ^ (value >>> 15), value | 1);
-    value ^= value + Math.imul(value ^ (value >>> 7), value | 61);
-    return ((value ^ (value >>> 14)) >>> 0) / 4294967296;
-  };
-}
-
-function createPromotionalDecorations(palette) {
-  const random = createSeededRandom(palette.seed);
-  const selectedSet = decorationSets[palette.seed % decorationSets.length];
-  const objectCount = 5 + (palette.seed % 2);
-  const anchorOffset = palette.seed % safeAnchors.length;
-  const objects = selectedSet.slice(0, objectCount).map((shapeName, index) => {
-    const shape = decorationShapes[shapeName];
-    const [baseX, baseY] = safeAnchors[(index + anchorOffset) % safeAnchors.length];
-    const size = (3.4 + random() * 4.8) * shape.scale;
-    const left = Math.max(1, Math.min(94, baseX + (random() - 0.5) * 5));
-    const top = Math.max(2, Math.min(92, baseY + (random() - 0.5) * 6));
-    const rotation = Math.round(random() * 150 - 75);
-    const color = index % 2 ? palette.secondary : palette.accent;
-    return `<span class="promo-object ${shape.className}" style="left:${left.toFixed(1)}%;top:${top.toFixed(1)}%;width:${size.toFixed(1)}vmin;transform:rotate(${rotation}deg);color:${color};opacity:${shape.opacity};"></span>`;
-  }).join('');
-
-  return `<div class="promo-decor" aria-hidden="true">${objects}</div>`;
-}
-
-function getPromotionalDecorationStyles() {
-  return `
-    .promo-decor { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
-    .promo-object { position: absolute; display: block; aspect-ratio: 1; }
-    .promo-object::before,
-    .promo-object::after { content: ''; position: absolute; }
-    .promo-object.ring { border: clamp(2px, 0.28vw, 6px) solid currentColor; border-radius: 50%; }
-    .promo-object.double-ring { border: clamp(2px, 0.24vw, 5px) solid currentColor; border-radius: 50%; }
-    .promo-object.double-ring::after { inset: 20%; border: clamp(1px, 0.15vw, 3px) solid currentColor; border-radius: 50%; }
-    .promo-object.pill { aspect-ratio: 2.3; border-radius: 999px; background: currentColor; }
-    .promo-object.dots { border-radius: 50%; background: currentColor; box-shadow: 1.2vmin 0 0 -0.22vmin currentColor, 0 1.2vmin 0 -0.22vmin currentColor, 1.2vmin 1.2vmin 0 -0.22vmin currentColor; }
-    .promo-object.sparkle { background: currentColor; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
-    .promo-object.diamond { border: clamp(2px, 0.25vw, 5px) solid currentColor; border-radius: 18%; transform-origin: center; }
-    .promo-object.triangle { background: currentColor; clip-path: polygon(50% 4%, 96% 91%, 4% 91%); }
-    .promo-object.hexagon { background: currentColor; clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%); }
-    .promo-object.squircle { border: clamp(2px, 0.25vw, 5px) solid currentColor; border-radius: 32%; }
-    .promo-object.plus { background: currentColor; clip-path: polygon(36% 0, 64% 0, 64% 36%, 100% 36%, 100% 64%, 64% 64%, 64% 100%, 36% 100%, 36% 64%, 0 64%, 0 36%, 36% 36%); }
-    .promo-object.chevron { background: currentColor; clip-path: polygon(0 18%, 50% 66%, 100% 18%, 100% 48%, 50% 96%, 0 48%); }
-    .promo-object.orbit { aspect-ratio: 1.8; border: clamp(2px, 0.23vw, 5px) solid currentColor; border-radius: 50%; }
-    .promo-object.orbit::after { top: 50%; left: 88%; width: 20%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: currentColor; }
-    .promo-object.bars { background: repeating-linear-gradient(90deg, currentColor 0 12%, transparent 12% 24%); border-radius: 18%; }
-    .promo-object.flower { background: currentColor; clip-path: polygon(50% 25%, 65% 5%, 76% 28%, 100% 24%, 88% 50%, 100% 76%, 76% 72%, 65% 95%, 50% 75%, 35% 95%, 24% 72%, 0 76%, 12% 50%, 0 24%, 24% 28%, 35% 5%); }
-    .promo-object.crescent { border-radius: 50%; box-shadow: inset 1.7vmin -0.45vmin 0 0 currentColor; }
-    .promo-object.wave { aspect-ratio: 2.2; border-top: clamp(3px, 0.35vw, 7px) solid currentColor; border-radius: 50%; }
-    .promo-object.wave::after { top: 28%; left: 38%; width: 62%; height: 48%; border-bottom: clamp(3px, 0.35vw, 7px) solid currentColor; border-radius: 50%; }
-    .promo-object.cube { background: currentColor; clip-path: polygon(50% 0, 94% 24%, 94% 74%, 50% 100%, 6% 74%, 6% 24%); }
-    .promo-object.cube::after { inset: 17% 20%; background: rgba(255,255,255,0.42); clip-path: polygon(50% 0, 100% 24%, 100% 70%, 50% 100%, 0 70%, 0 24%); }
-    .promo-object.burst { background: currentColor; clip-path: polygon(50% 0, 59% 34%, 85% 15%, 66% 41%, 100% 50%, 66% 59%, 85% 85%, 59% 66%, 50% 100%, 41% 66%, 15% 85%, 34% 59%, 0 50%, 34% 41%, 15% 15%, 41% 34%); }
-  `;
-}
-
-module.exports = {
-  decorationShapes,
-  decorationSets,
-  getDecorationSeed,
-  createPromotionalDecorations,
-  getPromotionalDecorationStyles,
-};
+const decorationShapes = Object.freeze({
+  ring: { className: 'ring', scale: 1, opacity: 0.28 },
+  doubleRing: { className: 'double-ring', scale: 1.08, opacity: 0.24 },
+  pill: { className: 'pill', scale: 1.15, opacity: 0.22 },
+  dots: { className: 'dots', scale: 0.72, opacity: 0.25 },
+  sparkle: { className: 'sparkle', scale: 0.72, opacity: 0.25 },
+  diamond: { className: 'diamond', scale: 0.78, opacity: 0.2 },
+  triangle: { className: 'triangle', scale: 0.8, opacity: 0.2 },
+  hexagon: { className: 'hexagon', scale: 0.9, opacity: 0.2 },
+  squircle: { className: 'squircle', scale: 0.9, opacity: 0.2 },
+  plus: { className: 'plus', scale: 0.7, opacity: 0.22 },
+  chevron: { className: 'chevron', scale: 0.82, opacity: 0.24 },
+  orbit: { className: 'orbit', scale: 1.25, opacity: 0.25 },
+  bars: { className: 'bars', scale: 0.82, opacity: 0.2 },
+  flower: { className: 'flower', scale: 0.8, opacity: 0.2 },
+  crescent: { className: 'crescent', scale: 0.82, opacity: 0.22 },
+  wave: { className: 'wave', scale: 1.18, opacity: 0.24 },
+  cube: { className: 'cube', scale: 0.88, opacity: 0.18 },
+  burst: { className: 'burst', scale: 0.72, opacity: 0.2 },
+});
+
+const decorationSets = Object.freeze([
+  ['ring', 'sparkle', 'pill', 'dots', 'diamond', 'orbit'],
+  ['doubleRing', 'triangle', 'bars', 'crescent', 'sparkle', 'pill'],
+  ['hexagon', 'wave', 'dots', 'plus', 'ring', 'flower'],
+  ['squircle', 'orbit', 'chevron', 'burst', 'pill', 'diamond'],
+  ['flower', 'doubleRing', 'cube', 'dots', 'wave', 'plus'],
+  ['crescent', 'sparkle', 'hexagon', 'bars', 'ring', 'chevron'],
+  ['cube', 'pill', 'burst', 'orbit', 'triangle', 'dots'],
+  ['wave', 'diamond', 'flower', 'doubleRing', 'squircle', 'sparkle'],
+]);
+
+const safeAnchors = Object.freeze([
+  [5, 11],
+  [91, 13],
+  [5, 38],
+  [92, 42],
+  [6, 70],
+  [91, 73],
+  [12, 91],
+  [85, 90],
+]);
+
+function getDecorationSeed(value) {
+  let hash = 2166136261;
+  for (const character of String(value)) {
+    hash ^= character.charCodeAt(0);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+
+function createSeededRandom(seed) {
+  let state = seed >>> 0;
+  return () => {
+    state += 0x6D2B79F5;
+    let value = state;
+    value = Math.imul(value ^ (value >>> 15), value | 1);
+    value ^= value + Math.imul(value ^ (value >>> 7), value | 61);
+    return ((value ^ (value >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+function createPromotionalDecorations(palette) {
+  const random = createSeededRandom(palette.seed);
+  const selectedSet = decorationSets[palette.seed % decorationSets.length];
+  const objectCount = 5 + (palette.seed % 2);
+  const anchorOffset = palette.seed % safeAnchors.length;
+  const objects = selectedSet.slice(0, objectCount).map((shapeName, index) => {
+    const shape = decorationShapes[shapeName];
+    const [baseX, baseY] = safeAnchors[(index + anchorOffset) % safeAnchors.length];
+    const size = (3.4 + random() * 4.8) * shape.scale;
+    const left = Math.max(1, Math.min(94, baseX + (random() - 0.5) * 5));
+    const top = Math.max(2, Math.min(92, baseY + (random() - 0.5) * 6));
+    const rotation = Math.round(random() * 150 - 75);
+    const color = index % 2 ? palette.secondary : palette.accent;
+    return `<span class="promo-object ${shape.className}" style="left:${left.toFixed(1)}%;top:${top.toFixed(1)}%;width:${size.toFixed(1)}vmin;transform:rotate(${rotation}deg);color:${color};opacity:${shape.opacity};"></span>`;
+  }).join('');
+
+  return `<div class="promo-decor" aria-hidden="true">${objects}</div>`;
+}
+
+function getPromotionalDecorationStyles() {
+  return `
+    .promo-decor { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
+    .promo-object { position: absolute; display: block; aspect-ratio: 1; }
+    .promo-object::before,
+    .promo-object::after { content: ''; position: absolute; }
+    .promo-object.ring { border: clamp(2px, 0.28vw, 6px) solid currentColor; border-radius: 50%; }
+    .promo-object.double-ring { border: clamp(2px, 0.24vw, 5px) solid currentColor; border-radius: 50%; }
+    .promo-object.double-ring::after { inset: 20%; border: clamp(1px, 0.15vw, 3px) solid currentColor; border-radius: 50%; }
+    .promo-object.pill { aspect-ratio: 2.3; border-radius: 999px; background: currentColor; }
+    .promo-object.dots { border-radius: 50%; background: currentColor; box-shadow: 1.2vmin 0 0 -0.22vmin currentColor, 0 1.2vmin 0 -0.22vmin currentColor, 1.2vmin 1.2vmin 0 -0.22vmin currentColor; }
+    .promo-object.sparkle { background: currentColor; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
+    .promo-object.diamond { border: clamp(2px, 0.25vw, 5px) solid currentColor; border-radius: 18%; transform-origin: center; }
+    .promo-object.triangle { background: currentColor; clip-path: polygon(50% 4%, 96% 91%, 4% 91%); }
+    .promo-object.hexagon { background: currentColor; clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%); }
+    .promo-object.squircle { border: clamp(2px, 0.25vw, 5px) solid currentColor; border-radius: 32%; }
+    .promo-object.plus { background: currentColor; clip-path: polygon(36% 0, 64% 0, 64% 36%, 100% 36%, 100% 64%, 64% 64%, 64% 100%, 36% 100%, 36% 64%, 0 64%, 0 36%, 36% 36%); }
+    .promo-object.chevron { background: currentColor; clip-path: polygon(0 18%, 50% 66%, 100% 18%, 100% 48%, 50% 96%, 0 48%); }
+    .promo-object.orbit { aspect-ratio: 1.8; border: clamp(2px, 0.23vw, 5px) solid currentColor; border-radius: 50%; }
+    .promo-object.orbit::after { top: 50%; left: 88%; width: 20%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: currentColor; }
+    .promo-object.bars { background: repeating-linear-gradient(90deg, currentColor 0 12%, transparent 12% 24%); border-radius: 18%; }
+    .promo-object.flower { background: currentColor; clip-path: polygon(50% 25%, 65% 5%, 76% 28%, 100% 24%, 88% 50%, 100% 76%, 76% 72%, 65% 95%, 50% 75%, 35% 95%, 24% 72%, 0 76%, 12% 50%, 0 24%, 24% 28%, 35% 5%); }
+    .promo-object.crescent { border-radius: 50%; box-shadow: inset 1.7vmin -0.45vmin 0 0 currentColor; }
+    .promo-object.wave { aspect-ratio: 2.2; border-top: clamp(3px, 0.35vw, 7px) solid currentColor; border-radius: 50%; }
+    .promo-object.wave::after { top: 28%; left: 38%; width: 62%; height: 48%; border-bottom: clamp(3px, 0.35vw, 7px) solid currentColor; border-radius: 50%; }
+    .promo-object.cube { background: currentColor; clip-path: polygon(50% 0, 94% 24%, 94% 74%, 50% 100%, 6% 74%, 6% 24%); }
+    .promo-object.cube::after { inset: 17% 20%; background: rgba(255,255,255,0.42); clip-path: polygon(50% 0, 100% 24%, 100% 70%, 50% 100%, 0 70%, 0 24%); }
+    .promo-object.burst { background: currentColor; clip-path: polygon(50% 0, 59% 34%, 85% 15%, 66% 41%, 100% 50%, 66% 59%, 85% 85%, 59% 66%, 50% 100%, 41% 66%, 15% 85%, 34% 59%, 0 50%, 34% 41%, 15% 15%, 41% 34%); }
+  `;
+}
+
+module.exports = {
+  decorationShapes,
+  decorationSets,
+  getDecorationSeed,
+  createPromotionalDecorations,
+  getPromotionalDecorationStyles,
+};

package/files/scripts-screenshot/screenshot/frame-samples.js

@@ -1,117 +1,117 @@
-const fs = require('node:fs');
-const path = require('node:path');
-const sharp = require('sharp');
-
-const frameStyles = {
-  android: {
-    graphite: { label: 'A · Graphite Android', detail: 'Slim dark bezel', outer: '#151a24', edge: '#626d7f', inner: '#080b12', radius: 47 },
-    cobalt: { label: 'B · Cobalt Android', detail: 'Blue accent bezel', outer: '#1945bc', edge: '#8aa9ff', inner: '#07102f', radius: 43 },
-  },
-  ios: {
-    titanium: { label: 'C · Titanium iPhone', detail: 'Light metal edge', outer: '#c7ced6', edge: '#eef2f6', inner: '#222936', radius: 53 },
-    midnight: { label: 'D · Midnight iPhone', detail: 'Dark rounded edge', outer: '#202333', edge: '#586076', inner: '#080b12', radius: 53 },
-  },
-};
-
-function getStatusBarSvg(platform, time) {
-  if (platform === 'ios') {
-    return `<rect x="12" y="22" width="316" height="40" fill="#f5f7fc"/>
-      <text x="29" y="47" font-family="Arial,sans-serif" font-size="14" font-weight="700" fill="#050505">${time}</text>
-      <circle cx="246" cy="40" r="2" fill="#c5c7cb"/><circle cx="254" cy="40" r="2" fill="#c5c7cb"/>
-      <circle cx="262" cy="40" r="2" fill="#c5c7cb"/><circle cx="270" cy="40" r="2" fill="#c5c7cb"/>
-      <path d="M275 35 Q284 27 293 35 M278 39 Q284 34 290 39 M282 43 Q284 41 286 43" fill="none" stroke="#050505" stroke-width="2.5" stroke-linecap="round"/>
-      <rect x="295" y="33" width="17" height="13" rx="3" fill="none" stroke="#a7aaae" stroke-width="1.5"/>
-      <rect x="297" y="35" width="13" height="9" rx="2" fill="#050505"/>
-      <rect x="313" y="37" width="2" height="5" rx="1" fill="#a7aaae"/>`;
-  }
-
-  return `<rect x="12" y="22" width="316" height="40" fill="#9075ed"/>
-    <text x="29" y="47" font-family="Arial,sans-serif" font-size="14" fill="#ffffff">${time}</text>
-    <circle cx="86" cy="41" r="5" fill="none" stroke="#ffffff" stroke-width="1.2"/>
-    <circle cx="84" cy="40" r="0.8" fill="#ffffff"/><circle cx="88" cy="40" r="0.8" fill="#ffffff"/>
-    <g transform="translate(-15,0)">
-      <text x="200" y="36" font-family="Arial,sans-serif" font-size="7" font-weight="700" fill="#ffffff">0.26</text>
-      <text x="200" y="44" font-family="Arial,sans-serif" font-size="6" font-weight="700" fill="#ffffff">KB/s</text>
-      <path d="M222 43 L235 33 L235 43 Z M242 43 L254 33 L254 43 Z" fill="#ffffff"/>
-      <text x="257" y="39" font-family="Arial,sans-serif" font-size="7" font-weight="700" fill="#ffffff">Vo</text>
-      <text x="257" y="46" font-family="Arial,sans-serif" font-size="6" font-weight="700" fill="#ffffff">WiFi</text>
-      <path d="M274 35 Q283 27 292 35 M277 39 Q283 34 289 39 M281 43 Q283 41 285 43" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>
-      <rect x="296" y="34" width="19" height="11" rx="2" fill="none" stroke="#ffffff" stroke-width="1.4"/>
-      <path d="M305 33 L301 40 L306 40 L304 46 L312 38 L307 38 L310 33 Z" fill="#ffffff"/>
-      <text x="317" y="43" font-family="Arial,sans-serif" font-size="7" fill="#ffffff">87%</text>
-    </g>`;
-}
-
-function createFallbackScreenshot(platform) {
-  const width = platform === 'ios' ? 1320 : 1080;
-  const height = platform === 'ios' ? 2868 : 2400;
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
-    <rect width="100%" height="100%" fill="#f5f7fc"/>
-    <rect x="8%" y="26%" width="84%" height="20%" rx="60" fill="#d7ddff"/>
-    <text x="50%" y="37%" text-anchor="middle" font-family="Arial,sans-serif" font-size="62" font-weight="700" fill="#4446c6">Image Compressor</text>
-    <rect x="8%" y="62%" width="84%" height="8%" rx="55" fill="#5145e7"/>
-    <text x="50%" y="67%" text-anchor="middle" font-family="Arial,sans-serif" font-size="42" font-weight="700" fill="#ffffff">Select images</text>
-  </svg>`;
-  return sharp(Buffer.from(svg)).png().toBuffer();
-}
-
-async function getSampleScreenshot(autoScreenshotDirectory, platform) {
-  const directory = path.join(autoScreenshotDirectory, 'Store-image-Screenshot', platform === 'ios' ? 'iPhone' : 'Android');
-  if (fs.existsSync(directory)) {
-    const screenshot = fs.readdirSync(directory).filter((name) => /\.png$/i.test(name)).sort()[0];
-    if (screenshot) return fs.readFileSync(path.join(directory, screenshot));
-  }
-  return createFallbackScreenshot(platform);
-}
-
-function createSampleCard(style, platform, screenshotUrl, index) {
-  const screenRadius = platform === 'ios' ? 40 : 34;
-  const sampleTime = platform === 'ios' ? (index ? '12:21' : '12:20') : (index ? '10:56' : '10:55');
-  const camera = platform === 'ios'
-    ? '<rect x="130" y="27" width="80" height="24" rx="12" fill="#05070b"/>'
-    : '';
-  const navigation = platform === 'android'
-    ? '<rect x="12" y="717" width="316" height="16" fill="#f4f7f8"/><rect x="107" y="725" width="126" height="3" rx="1.5" fill="#7a7b7c"/>'
-    : '';
-
-  return `<g transform="translate(${index * 510},0)">
-    <rect x="12" y="12" width="486" height="926" rx="25" fill="#ffffff" stroke="#dce2ee"/>
-    <text x="35" y="52" fill="#172137" font-family="Arial,sans-serif" font-size="24" font-weight="700">${style.label}</text>
-    <text x="35" y="80" fill="#6c7890" font-family="Arial,sans-serif" font-size="14">${style.detail} · ${platform === 'ios' ? 'iOS' : 'Android'} status bar</text>
-    <g transform="translate(85,115)">
-      <rect x="1" y="7" width="338" height="753" rx="47" fill="#0a1225" opacity="0.2"/>
-      <rect x="1" y="1" width="338" height="753" rx="${style.radius}" fill="${style.outer}" stroke="${style.edge}" stroke-width="2"/>
-      <rect x="7" y="7" width="326" height="741" rx="${style.radius - 5}" fill="${style.inner}"/>
-      <clipPath id="screen-${index}"><rect x="12" y="22" width="316" height="711" rx="${screenRadius}"/></clipPath>
-      <g clip-path="url(#screen-${index})">
-        <rect x="12" y="22" width="316" height="711" fill="#f5f7fc"/>
-        <image href="${screenshotUrl}" x="12" y="62" width="316" height="671" preserveAspectRatio="xMidYMin slice"/>
-        ${getStatusBarSvg(platform, sampleTime)}
-        ${navigation}
-      </g>
-      ${camera}
-      <rect x="338" y="177" width="4" height="66" rx="2" fill="${style.edge}"/>
-    </g>
-  </g>`;
-}
-
-async function createFrameSamples(autoScreenshotDirectory) {
-  fs.mkdirSync(autoScreenshotDirectory, { recursive: true });
-  const paths = [];
-
-  for (const platform of ['android', 'ios']) {
-    const screenshot = await getSampleScreenshot(autoScreenshotDirectory, platform);
-    const screenshotUrl = `data:image/png;base64,${screenshot.toString('base64')}`;
-    const cards = Object.values(frameStyles[platform])
-      .map((style, index) => createSampleCard(style, platform, screenshotUrl, index))
-      .join('');
-    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="1020" height="950" viewBox="0 0 1020 950"><rect width="1020" height="950" fill="#eef2f9"/>${cards}</svg>`;
-    const output = path.join(autoScreenshotDirectory, `${platform}-frame-options.png`);
-    await sharp(Buffer.from(svg)).png().toFile(output);
-    paths.push(output);
-  }
-
-  return paths;
-}
-
-module.exports = { frameStyles, createFrameSamples };
+const fs = require('node:fs');
+const path = require('node:path');
+const sharp = require('sharp');
+
+const frameStyles = {
+  android: {
+    graphite: { label: 'A · Graphite Android', detail: 'Slim dark bezel', outer: '#151a24', edge: '#626d7f', inner: '#080b12', radius: 47 },
+    cobalt: { label: 'B · Cobalt Android', detail: 'Blue accent bezel', outer: '#1945bc', edge: '#8aa9ff', inner: '#07102f', radius: 43 },
+  },
+  ios: {
+    titanium: { label: 'C · Titanium iPhone', detail: 'Light metal edge', outer: '#c7ced6', edge: '#eef2f6', inner: '#222936', radius: 53 },
+    midnight: { label: 'D · Midnight iPhone', detail: 'Dark rounded edge', outer: '#202333', edge: '#586076', inner: '#080b12', radius: 53 },
+  },
+};
+
+function getStatusBarSvg(platform, time) {
+  if (platform === 'ios') {
+    return `<rect x="12" y="22" width="316" height="40" fill="#f5f7fc"/>
+      <text x="29" y="47" font-family="Arial,sans-serif" font-size="14" font-weight="700" fill="#050505">${time}</text>
+      <circle cx="246" cy="40" r="2" fill="#c5c7cb"/><circle cx="254" cy="40" r="2" fill="#c5c7cb"/>
+      <circle cx="262" cy="40" r="2" fill="#c5c7cb"/><circle cx="270" cy="40" r="2" fill="#c5c7cb"/>
+      <path d="M275 35 Q284 27 293 35 M278 39 Q284 34 290 39 M282 43 Q284 41 286 43" fill="none" stroke="#050505" stroke-width="2.5" stroke-linecap="round"/>
+      <rect x="295" y="33" width="17" height="13" rx="3" fill="none" stroke="#a7aaae" stroke-width="1.5"/>
+      <rect x="297" y="35" width="13" height="9" rx="2" fill="#050505"/>
+      <rect x="313" y="37" width="2" height="5" rx="1" fill="#a7aaae"/>`;
+  }
+
+  return `<rect x="12" y="22" width="316" height="40" fill="#9075ed"/>
+    <text x="29" y="47" font-family="Arial,sans-serif" font-size="14" fill="#ffffff">${time}</text>
+    <circle cx="86" cy="41" r="5" fill="none" stroke="#ffffff" stroke-width="1.2"/>
+    <circle cx="84" cy="40" r="0.8" fill="#ffffff"/><circle cx="88" cy="40" r="0.8" fill="#ffffff"/>
+    <g transform="translate(-15,0)">
+      <text x="200" y="36" font-family="Arial,sans-serif" font-size="7" font-weight="700" fill="#ffffff">0.26</text>
+      <text x="200" y="44" font-family="Arial,sans-serif" font-size="6" font-weight="700" fill="#ffffff">KB/s</text>
+      <path d="M222 43 L235 33 L235 43 Z M242 43 L254 33 L254 43 Z" fill="#ffffff"/>
+      <text x="257" y="39" font-family="Arial,sans-serif" font-size="7" font-weight="700" fill="#ffffff">Vo</text>
+      <text x="257" y="46" font-family="Arial,sans-serif" font-size="6" font-weight="700" fill="#ffffff">WiFi</text>
+      <path d="M274 35 Q283 27 292 35 M277 39 Q283 34 289 39 M281 43 Q283 41 285 43" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>
+      <rect x="296" y="34" width="19" height="11" rx="2" fill="none" stroke="#ffffff" stroke-width="1.4"/>
+      <path d="M305 33 L301 40 L306 40 L304 46 L312 38 L307 38 L310 33 Z" fill="#ffffff"/>
+      <text x="317" y="43" font-family="Arial,sans-serif" font-size="7" fill="#ffffff">87%</text>
+    </g>`;
+}
+
+function createFallbackScreenshot(platform) {
+  const width = platform === 'ios' ? 1320 : 1080;
+  const height = platform === 'ios' ? 2868 : 2400;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
+    <rect width="100%" height="100%" fill="#f5f7fc"/>
+    <rect x="8%" y="26%" width="84%" height="20%" rx="60" fill="#d7ddff"/>
+    <text x="50%" y="37%" text-anchor="middle" font-family="Arial,sans-serif" font-size="62" font-weight="700" fill="#4446c6">Image Compressor</text>
+    <rect x="8%" y="62%" width="84%" height="8%" rx="55" fill="#5145e7"/>
+    <text x="50%" y="67%" text-anchor="middle" font-family="Arial,sans-serif" font-size="42" font-weight="700" fill="#ffffff">Select images</text>
+  </svg>`;
+  return sharp(Buffer.from(svg)).png().toBuffer();
+}
+
+async function getSampleScreenshot(autoScreenshotDirectory, platform) {
+  const directory = path.join(autoScreenshotDirectory, 'Store-image-Screenshot', platform === 'ios' ? 'iPhone' : 'Android');
+  if (fs.existsSync(directory)) {
+    const screenshot = fs.readdirSync(directory).filter((name) => /\.png$/i.test(name)).sort()[0];
+    if (screenshot) return fs.readFileSync(path.join(directory, screenshot));
+  }
+  return createFallbackScreenshot(platform);
+}
+
+function createSampleCard(style, platform, screenshotUrl, index) {
+  const screenRadius = platform === 'ios' ? 40 : 34;
+  const sampleTime = platform === 'ios' ? (index ? '12:21' : '12:20') : (index ? '10:56' : '10:55');
+  const camera = platform === 'ios'
+    ? '<rect x="130" y="27" width="80" height="24" rx="12" fill="#05070b"/>'
+    : '';
+  const navigation = platform === 'android'
+    ? '<rect x="12" y="717" width="316" height="16" fill="#f4f7f8"/><rect x="107" y="725" width="126" height="3" rx="1.5" fill="#7a7b7c"/>'
+    : '';
+
+  return `<g transform="translate(${index * 510},0)">
+    <rect x="12" y="12" width="486" height="926" rx="25" fill="#ffffff" stroke="#dce2ee"/>
+    <text x="35" y="52" fill="#172137" font-family="Arial,sans-serif" font-size="24" font-weight="700">${style.label}</text>
+    <text x="35" y="80" fill="#6c7890" font-family="Arial,sans-serif" font-size="14">${style.detail} · ${platform === 'ios' ? 'iOS' : 'Android'} status bar</text>
+    <g transform="translate(85,115)">
+      <rect x="1" y="7" width="338" height="753" rx="47" fill="#0a1225" opacity="0.2"/>
+      <rect x="1" y="1" width="338" height="753" rx="${style.radius}" fill="${style.outer}" stroke="${style.edge}" stroke-width="2"/>
+      <rect x="7" y="7" width="326" height="741" rx="${style.radius - 5}" fill="${style.inner}"/>
+      <clipPath id="screen-${index}"><rect x="12" y="22" width="316" height="711" rx="${screenRadius}"/></clipPath>
+      <g clip-path="url(#screen-${index})">
+        <rect x="12" y="22" width="316" height="711" fill="#f5f7fc"/>
+        <image href="${screenshotUrl}" x="12" y="62" width="316" height="671" preserveAspectRatio="xMidYMin slice"/>
+        ${getStatusBarSvg(platform, sampleTime)}
+        ${navigation}
+      </g>
+      ${camera}
+      <rect x="338" y="177" width="4" height="66" rx="2" fill="${style.edge}"/>
+    </g>
+  </g>`;
+}
+
+async function createFrameSamples(autoScreenshotDirectory) {
+  fs.mkdirSync(autoScreenshotDirectory, { recursive: true });
+  const paths = [];
+
+  for (const platform of ['android', 'ios']) {
+    const screenshot = await getSampleScreenshot(autoScreenshotDirectory, platform);
+    const screenshotUrl = `data:image/png;base64,${screenshot.toString('base64')}`;
+    const cards = Object.values(frameStyles[platform])
+      .map((style, index) => createSampleCard(style, platform, screenshotUrl, index))
+      .join('');
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="1020" height="950" viewBox="0 0 1020 950"><rect width="1020" height="950" fill="#eef2f9"/>${cards}</svg>`;
+    const output = path.join(autoScreenshotDirectory, `${platform}-frame-options.png`);
+    await sharp(Buffer.from(svg)).png().toFile(output);
+    paths.push(output);
+  }
+
+  return paths;
+}
+
+module.exports = { frameStyles, createFrameSamples };

package/files/take-screen-image.js

@@ -1211,12 +1211,33 @@ async function capturePageSnapshot(client) {
       };
 
       const serializeDocument = async (sourceDocument) => {
-        const clonedRoot = sourceDocument.documentElement.cloneNode(true);
-        const originalElements = [
-          sourceDocument.documentElement,
-          ...sourceDocument.documentElement.querySelectorAll('*'),
-        ];
-        const clonedElements = [clonedRoot, ...clonedRoot.querySelectorAll('*')];
+        const originalElements = [];
+        const clonedElements = [];
+        const cloneWithShadowRoots = (original) => {
+          const clone = original.cloneNode(false);
+          if (original.nodeType === Node.ELEMENT_NODE) {
+            originalElements.push(original);
+            clonedElements.push(clone);
+          }
+          for (const child of original.childNodes) {
+            clone.appendChild(cloneWithShadowRoots(child));
+          }
+          if (original.shadowRoot) {
+            const template = sourceDocument.createElement('template');
+            template.setAttribute('shadowrootmode', 'open');
+            for (const stylesheet of original.shadowRoot.adoptedStyleSheets || []) {
+              const style = sourceDocument.createElement('style');
+              style.textContent = [...stylesheet.cssRules].map((rule) => rule.cssText).join('\\n');
+              template.content.appendChild(style);
+            }
+            for (const child of original.shadowRoot.childNodes) {
+              template.content.appendChild(cloneWithShadowRoots(child));
+            }
+            clone.prepend(template);
+          }
+          return clone;
+        };
+        const clonedRoot = cloneWithShadowRoots(sourceDocument.documentElement);
 
         clonedRoot.setAttribute(
           'data-responsive-window-scroll-y',
@@ -1234,9 +1255,13 @@ async function capturePageSnapshot(client) {
             clone.setAttribute('data-responsive-scroll-left', String(original.scrollLeft));
           }
 
-          if (original.classList.contains('swiper-initialized')) {
+          if (original.classList.contains('swiper-initialized') || original.swiper) {
             clone.setAttribute('data-responsive-swiper-width', String(original.clientWidth));
             clone.setAttribute('data-responsive-swiper-height', String(original.clientHeight));
+            if (original.swiper) {
+              clone.setAttribute('data-responsive-swiper-active-index', String(original.swiper.activeIndex));
+              clone.setAttribute('data-responsive-swiper-direction', original.swiper.params.direction);
+            }
           }
 
           const tagName = original.tagName?.toLowerCase();
@@ -1321,7 +1346,7 @@ async function capturePageSnapshot(client) {
           }
         }));
 
-        clonedRoot.querySelectorAll('script, link[rel="modulepreload"]').forEach(
+        clonedElements.filter((element) => element.matches('script, link[rel="modulepreload"]')).forEach(
           (element) => element.remove(),
         );
         clonedRoot.querySelectorAll('meta[http-equiv="Content-Security-Policy"]').forEach(
@@ -1560,25 +1585,34 @@ async function waitForReplayLayout(client, snapshot) {
         new Promise((resolve) => setTimeout(resolve, 5000)),
       ]);
 
-      const replayElements = (selector) => replayDocuments.flatMap((replayDocument) => (
-        [...replayDocument.querySelectorAll(selector)]
+      const replayRoots = [];
+      const collectRoots = (root) => {
+        replayRoots.push(root);
+        root.querySelectorAll('*').forEach((element) => {
+          if (element.shadowRoot) collectRoots(element.shadowRoot);
+        });
+      };
+      replayDocuments.forEach(collectRoots);
+      const replayElements = (selector) => replayRoots.flatMap((root) => (
+        [...root.querySelectorAll(selector)]
       ));
 
       replayElements('[data-responsive-swiper-width]').forEach((swiper) => {
-        const wrapper = [...swiper.children].find((element) => (
+        const wrapper = swiper.shadowRoot?.querySelector('.swiper-wrapper') || [...swiper.children].find((element) => (
           element.classList.contains('swiper-wrapper')
         ));
 
         if (!wrapper) return;
 
-        const slides = [...wrapper.children].filter((element) => (
-          element.classList.contains('swiper-slide')
+        const slides = [...(swiper.shadowRoot ? swiper.children : wrapper.children)].filter((element) => (
+          element.matches('.swiper-slide, swiper-slide')
         ));
         const sourceWidth = Number(swiper.dataset.responsiveSwiperWidth);
         const sourceHeight = Number(swiper.dataset.responsiveSwiperHeight);
         const widthScale = sourceWidth > 0 ? swiper.clientWidth / sourceWidth : 1;
         const heightScale = sourceHeight > 0 ? swiper.clientHeight / sourceHeight : 1;
-        const isVertical = swiper.classList.contains('swiper-vertical');
+        const isVertical = swiper.dataset.responsiveSwiperDirection === 'vertical'
+          || swiper.classList.contains('swiper-vertical');
 
         slides.forEach((slide) => {
           if (!slide.dataset.responsiveSwiperWidth && slide.style.width) {
@@ -1601,7 +1635,7 @@ async function waitForReplayLayout(client, snapshot) {
           }
         });
 
-        const activeSlide = slides.find((slide) => (
+        const activeSlide = slides[Number(swiper.dataset.responsiveSwiperActiveIndex)] || slides.find((slide) => (
           slide.classList.contains('swiper-slide-active')
         )) || slides[0];