zdymak 0.3.0

package/src/cli.mjs

@@ -0,0 +1,155 @@
+/**
+ * zdymak CLI.
+ *
+ *   zdymak build       [--config <path>] [--out <dir>]   # EVERYTHING in the config: videos + screenshots
+ *   zdymak video       [--config <path>] [--target <ids>] [--out <dir>]
+ *   zdymak screenshots [--config <path>] [--out <dir>]   # per-device store screenshots
+ *   zdymak specs                                          # print the store spec matrix
+ *   zdymak capture --platform ios|android --name <screen> [--record] [--out <dir>]
+ *   zdymak help
+ */
+import path from 'node:path';
+import { registerFonts } from './fonts.mjs';
+import { loadConfig } from './config.mjs';
+import { buildVideo } from './video.mjs';
+import { buildReel } from './reel.mjs';
+import { buildPremium } from './premium.mjs';
+import { buildDeviceScreenshots } from './screenshots.mjs';
+import { VIDEO_TARGETS, IMAGE_TARGETS, videoTarget } from './specs.mjs';
+import { runCapture } from './capture/index.mjs';
+
+function parseFlags(argv) {
+  const flags = {};
+  const rest = [];
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a.startsWith('--')) flags[a.slice(2)] = argv[++i];
+    else rest.push(a);
+  }
+  return { flags, rest };
+}
+
+const DEFAULT_CONFIG = 'zdymak.config.mjs';
+
+async function open(flags) {
+  const cfg = await loadConfig(flags.config || DEFAULT_CONFIG);
+  registerFonts(cfg.brand.fontPaths);
+  const outDir = flags.out ? path.resolve(flags.out) : cfg.out;
+  return { cfg, outDir };
+}
+
+/** Build one video target (optionally at an overridden device size / scene set / theme). */
+async function buildVideoTarget({ id, scenes, brand, cfg, outFile, size, theme }) {
+  const base = videoTarget(id);
+  const spec = size ? { ...base, w: size[0], h: size[1] } : base;
+  const build = spec.style === 'reel' ? buildReel : spec.style === 'premium' ? buildPremium : buildVideo;
+  const tag = spec.style ? `, ${spec.style}` : '';
+  process.stdout.write(`  • ${id} (${spec.w}×${spec.h}${tag}${cfg.music ? ', ♪' : ''}) … `);
+  const { totalDur, warnings } = await build({
+    scenes, spec, brand, outFile,
+    sceneDur: cfg.sceneDur, xfade: cfg.xfade, timing: cfg.timing,
+    theme: theme ?? cfg.theme, music: cfg.music,
+  });
+  console.log(`${totalDur.toFixed(1)}s → ${path.relative(process.cwd(), outFile)}`);
+  for (const w of warnings) console.warn(`    ⚠︎ ${w}`);
+}
+
+async function cmdVideo(flags) {
+  const { cfg, outDir } = await open(flags);
+  const targets = flags.target ? flags.target.split(',').map((s) => s.trim()) : cfg.targets;
+  console.log(`zdymak video • ${cfg.scenes.length} scenes → ${targets.join(', ')}`);
+  for (const id of targets) {
+    await buildVideoTarget({ id, scenes: cfg.scenes, brand: cfg.brand, cfg, outFile: path.join(outDir, `${id}.mp4`) });
+  }
+  console.log('Done.');
+}
+
+async function cmdScreenshots(flags) {
+  const { cfg, outDir } = await open(flags);
+  if (!cfg.devices.length) {
+    console.warn('No `devices` in the config — nothing to screenshot. (See README: devices map.)');
+    return;
+  }
+  console.log(`zdymak screenshots • ${cfg.devices.length} device group(s)`);
+  for (const device of cfg.devices) {
+    const written = await buildDeviceScreenshots({ device, brand: cfg.brand, theme: device.theme ?? cfg.theme, outDir });
+    console.log(`  • ${device.name}: ${written.length} shot(s)${written[0] ? ` (${written[0].W}×${written[0].H}…)` : ' — no captures found, skipped'}`);
+  }
+  console.log('Done.');
+}
+
+async function cmdBuild(flags) {
+  const { cfg, outDir } = await open(flags);
+  // 1) shared (phone) video targets from the top-level scenes
+  if (cfg.targets.length && cfg.scenes.length) {
+    console.log('zdymak build • videos');
+    for (const id of cfg.targets) {
+      await buildVideoTarget({ id, scenes: cfg.scenes, brand: cfg.brand, cfg, outFile: path.join(outDir, `${id}.mp4`) });
+    }
+  }
+  // 2) per-device videos + screenshots
+  for (const device of cfg.devices) {
+    if (device.videos.length) {
+      console.log(`zdymak build • ${device.name} videos`);
+      for (const v of device.videos) {
+        await buildVideoTarget({ id: v.target, scenes: device.scenes, brand: cfg.brand, cfg, size: v.size, theme: device.theme, outFile: path.join(outDir, `${device.name}-${v.target}.mp4`) });
+      }
+    }
+    if (device.screenshots.length) {
+      const written = await buildDeviceScreenshots({ device, brand: cfg.brand, theme: device.theme ?? cfg.theme, outDir });
+      console.log(`  • ${device.name} screenshots: ${written.length}${written.length ? '' : ' — no captures found, skipped'}`);
+    }
+  }
+  console.log('Done.');
+}
+
+function cmdSpecs() {
+  console.log('\nVIDEO targets (produce an .mp4):');
+  for (const [id, s] of Object.entries(VIDEO_TARGETS)) {
+    const dur = s.minSec ? `${s.minSec}–${s.maxSec}s` : 'any length';
+    console.log(`  ${id.padEnd(20)} ${s.w}×${s.h} @${s.fps}  H.264 ${s.profile}@${s.level}  ${dur}  — ${s.store}`);
+  }
+  console.log('\nIMAGE targets (store screenshots — `zdymak screenshots` / `build`):');
+  for (const [id, s] of Object.entries(IMAGE_TARGETS)) {
+    const dim = s.accepts ? s.accepts.map((a) => a.join('×')).join(' | ') : `${s.w}×${s.h}`;
+    console.log(`  ${id.padEnd(24)} ${dim}${s.alpha === false ? '  (no alpha)' : ''}  — ${s.store}`);
+  }
+  console.log('');
+}
+
+function cmdHelp() {
+  console.log(`zdymak — premium App Store, Google Play & social videos + screenshots, from your captures
+
+Usage:
+  zdymak build       [--config <path>] [--out <dir>]   # everything: videos + per-device screenshots
+  zdymak video       [--config <path>] [--target <ids>] [--out <dir>]
+  zdymak screenshots [--config <path>] [--out <dir>]
+  zdymak specs
+  zdymak capture --platform ios|android --name <screen> [--record] [--out <dir>]
+  zdymak help
+
+Defaults: --config ${DEFAULT_CONFIG}. Needs ffmpeg on PATH (or $FFMPEG).
+README.md documents the config (brand, scenes, targets, theme, music, devices); SKILL.md is for agents.`);
+}
+
+export async function run(argv = process.argv.slice(2)) {
+  const [cmd, ...rest0] = argv;
+  const { flags, rest } = parseFlags(rest0);
+  try {
+    switch (cmd) {
+      case 'build': await cmdBuild(flags); break;
+      case 'video': await cmdVideo(flags); break;
+      case 'screenshots': await cmdScreenshots(flags); break;
+      case 'specs': cmdSpecs(); break;
+      case 'capture': await runCapture(flags, rest); break;
+      case 'help': case undefined: case '--help': case '-h': cmdHelp(); break;
+      default:
+        console.error(`Unknown command "${cmd}".\n`);
+        cmdHelp();
+        process.exitCode = 1;
+    }
+  } catch (e) {
+    console.error(`\n✗ ${e.message}`);
+    process.exitCode = 1;
+  }
+}

package/src/config.mjs

@@ -0,0 +1,95 @@
+/**
+ * Config loading + normalization. A project's `zdymak.config.mjs` (or .json) is the ONLY
+ * project-specific input; everything else lives in this reusable package.
+ *
+ * Shape (all paths are relative to the config file):
+ *   export default {
+ *     brand: { ink, title, sub, fontPaths? },   // hex colours; fontPaths optional custom TTFs
+ *     screenshotsDir: 'marketing/ios/captures', // where the PNGs live
+ *     suffix: '-light',                          // appended to scene.id → `${id}${suffix}.png`
+ *     scenes: [{ id | image, title, sub, move }],// move: pushIn|pushInSlow|pullBack|driftUp|driftLeft|…
+ *     targets: ['appstore-preview', 'play-promo'],
+ *     sceneDur: 3.1, xfade: 0.32,
+ *     out: 'store-assets',
+ *   }
+ */
+import fs from 'node:fs';
+import path from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+const DEFAULT_BRAND = {
+  ink: '#0b0b0a', title: '#F5F5F4', sub: '#BBF7D0', fontPaths: [],
+  // Reel-mode fields (device-framed marketing reel) — optional; only used by the `social-reel` target.
+  name: 'App', tagline: '', endline: '', endsub: '', logo: null, reel: {},
+};
+
+/** Map raw scenes → resolved scenes with absolute image paths (`${dir}/${id}${suffix}.png` or explicit). */
+function resolveScenes(rawScenes, baseDir, dir, suffix) {
+  return (rawScenes || []).map((s, i) => {
+    if (!s.image && !s.id) throw new Error(`Config error: scene[${i}] needs an "id" or an "image".`);
+    const image = s.image ? path.resolve(baseDir, s.image) : path.join(dir, `${s.id}${suffix}.png`);
+    return { id: s.id || String(i + 1), image, title: s.title || '', sub: s.sub || '', move: s.move };
+  });
+}
+
+const asList = (arr) => (arr || []).map((x) => (typeof x === 'string' ? { target: x } : x));
+
+export async function loadConfig(configPath) {
+  const abs = path.resolve(configPath);
+  if (!fs.existsSync(abs)) {
+    throw new Error(`Config not found: ${abs}\nCreate one (see the README) or pass --config <path>.`);
+  }
+  const baseDir = path.dirname(abs);
+
+  let raw;
+  if (abs.endsWith('.json')) {
+    raw = JSON.parse(fs.readFileSync(abs, 'utf8'));
+  } else {
+    const mod = await import(pathToFileURL(abs).href);
+    raw = mod.default ?? mod.config ?? mod;
+  }
+
+  const brand = { ...DEFAULT_BRAND, ...(raw.brand || {}) };
+  brand.fontPaths = (brand.fontPaths || []).map((p) => path.resolve(baseDir, p));
+  if (brand.logo) brand.logo = path.resolve(baseDir, brand.logo); // reel-mode logo (cold-open / end-card)
+
+  const screenshotsDir = raw.screenshotsDir ? path.resolve(baseDir, raw.screenshotsDir) : baseDir;
+  const suffix = raw.suffix ?? '';
+
+  // Top-level scenes are required UNLESS a `devices` map supplies its own per-device scenes.
+  if (!raw.devices && (!Array.isArray(raw.scenes) || raw.scenes.length === 0)) {
+    throw new Error('Config error: `scenes` must be a non-empty array (or use a `devices` map).');
+  }
+  const scenes = resolveScenes(raw.scenes, baseDir, screenshotsDir, suffix);
+
+  // Optional music bed shared by every video target — path is relative to the config file.
+  const music = raw.music?.path ? { ...raw.music, path: path.resolve(baseDir, raw.music.path) } : undefined;
+
+  // Modular per-device config. An app lists ONLY the devices it ships; each has its own captures dir,
+  // optional scene overrides, screenshot targets (+ style) and video targets. Missing captures skip cleanly.
+  const devices = Object.entries(raw.devices || {}).map(([name, d]) => {
+    const dir = d.capturesDir ? path.resolve(baseDir, d.capturesDir) : screenshotsDir;
+    const suf = d.suffix ?? suffix;
+    return {
+      name,
+      scenes: resolveScenes(d.scenes || raw.scenes, baseDir, dir, suf),
+      screenshots: asList(d.screenshots),
+      videos: asList(d.videos),
+      theme: d.theme,
+    };
+  });
+
+  return {
+    brand,
+    scenes,
+    devices,
+    music,
+    targets: raw.targets?.length ? raw.targets : ['appstore-preview'],
+    sceneDur: raw.sceneDur ?? 3.1,
+    xfade: raw.xfade ?? 0.32,
+    timing: raw.timing, // reel-mode timeline override { coldOpen, scene, endCard, xfade }
+    theme: raw.theme, // premium-technique styling override (matte, vignette, label, cuts) — defaults apply
+    out: path.resolve(baseDir, raw.out || 'store-assets'),
+    baseDir,
+  };
+}

package/src/encode.mjs

@@ -0,0 +1,44 @@
+/**
+ * Shared H.264 encoder — one place every video builder (bleed / reel / premium) pipes raw RGBA frames to.
+ * Handles the store-safe encode (High profile at the target level, yuv420p, faststart) and the optional
+ * MUSIC bed with the same knobs across all styles: offset into the track, fade-in / fade-out, volume.
+ *
+ * music = { path, offset=0, fadeIn=0.6, fadeOut=0.8, volume=1 }  (all optional except path)
+ */
+import { spawn } from 'node:child_process';
+import fs from 'node:fs';
+
+/** Start the ffmpeg process reading rawvideo from stdin. Returns { proc, done, hasAudio }. */
+export function spawnEncoder({ W, H, fps, spec, outFile, music, totalDur }) {
+  const hasAudio = !!(music && music.path && fs.existsSync(music.path));
+  const args = [
+    '-y', '-loglevel', 'error',
+    '-f', 'rawvideo', '-pix_fmt', 'rgba', '-s', `${W}x${H}`, '-r', String(fps), '-i', '-',
+  ];
+
+  if (hasAudio) {
+    const offset = Number(music.offset) || 0;
+    if (offset > 0) args.push('-ss', String(offset)); // seek INTO the track before it's used as input
+    args.push('-i', music.path);
+    const vol = music.volume ?? 1;
+    const fi = music.fadeIn ?? 0.6;
+    const fo = music.fadeOut ?? 0.8;
+    const outStart = Math.max(0, totalDur - fo).toFixed(2);
+    args.push('-af', `volume=${vol},afade=t=in:st=0:d=${fi},afade=t=out:st=${outStart}:d=${fo}`, '-shortest');
+  }
+
+  args.push(
+    '-c:v', 'libx264', '-profile:v', spec.profile, '-level:v', spec.level,
+    '-pix_fmt', 'yuv420p', '-crf', '17', '-maxrate', '12M', '-bufsize', '12M',
+    '-preset', 'slow', '-r', String(fps), '-movflags', '+faststart',
+    ...(hasAudio ? ['-c:a', 'aac', '-b:a', '192k'] : ['-an']),
+    outFile,
+  );
+
+  const proc = spawn(process.env.FFMPEG || 'ffmpeg', args, { stdio: ['pipe', 'inherit', 'inherit'] });
+  const done = new Promise((res, rej) => {
+    proc.on('close', (code) => (code === 0 ? res() : rej(new Error(`ffmpeg exited ${code}`))));
+    proc.on('error', (e) => rej(new Error(`ffmpeg failed to start (${e.message}). Is ffmpeg on PATH or $FFMPEG set?`)));
+  });
+  return { proc, done, hasAudio };
+}

package/src/fonts.mjs

@@ -0,0 +1,42 @@
+/**
+ * Font registration for the canvas renderer. Everything renders under one family name — "Brand" — so the
+ * engine never branches on which file won. Resolution order:
+ *   1. explicit paths the project passes in (`brand.fontPaths` — e.g. your own Inter/brand TTFs)
+ *   2. the host system font: San Francisco on macOS (the Apple system face — ideal for store assets),
+ *      Segoe UI on Windows, DejaVu Sans on Linux.
+ * No font is bundled, so there is nothing to license or ship; macOS (where you build App Store assets)
+ * always resolves to SF.
+ */
+import { GlobalFonts } from '@napi-rs/canvas';
+import fs from 'node:fs';
+
+const SYSTEM_CANDIDATES = [
+  '/System/Library/Fonts/SFNS.ttf', // macOS — San Francisco (variable, all weights)
+  '/System/Library/Fonts/SFNSDisplay.ttf',
+  'C:/Windows/Fonts/segoeui.ttf', // Windows — Segoe UI
+  'C:/Windows/Fonts/segoeuib.ttf',
+  '/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf', // Linux
+  '/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf',
+];
+
+/**
+ * Register the "Brand" family. `fontPaths` (optional) are tried first, in order.
+ * Returns true if at least one face registered (else the canvas default is used, with a warning).
+ */
+export function registerFonts(fontPaths = []) {
+  let any = false;
+  for (const p of [...fontPaths, ...SYSTEM_CANDIDATES]) {
+    if (p && fs.existsSync(p)) {
+      try {
+        GlobalFonts.registerFromPath(p, 'Brand');
+        any = true;
+      } catch {
+        /* skip unreadable */
+      }
+    }
+  }
+  if (!any) {
+    console.warn('[zdymak] No brand/system font found — captions use the canvas default. Pass brand.fontPaths to fix.');
+  }
+  return any;
+}

package/src/frames.mjs

@@ -0,0 +1,168 @@
+/**
+ * Device frames for the `framed` screenshot style — an iPhone bezel (Dynamic Island), an iPad bezel, or a
+ * round Apple-Watch ring, with the capture drawn inside. The screen rect follows the capture's OWN aspect,
+ * so nothing is cropped. Ported from a production store-asset pipeline; pure rendering.
+ *
+ * (Mac captures are already windowed — traffic-light title bar — so Mac uses the plain premium still; no
+ *  extra window frame is drawn here.)
+ */
+import { roundRectPath } from './canvas.mjs';
+
+/** Cover-fit an image into a rect (preserve aspect, crop overflow). */
+function drawInto(ctx, img, x, y, w, h) {
+  const sAspect = img.height / img.width;
+  let dw = w;
+  let dh = w * sAspect;
+  if (dh < h) {
+    dh = h;
+    dw = h / sAspect;
+  }
+  ctx.drawImage(img, x + (w - dw) / 2, y + (h - dh) / 2, dw, dh);
+}
+
+/** iPhone: dark unibody, thin uniform bezel, centred Dynamic Island. */
+export function drawPhoneFrame(ctx, img, cx, cy, screenW) {
+  const screenH = screenW * (img.height / img.width);
+  const bezel = Math.round(screenW * 0.032);
+  const bodyW = screenW + bezel * 2;
+  const bodyH = screenH + bezel * 2;
+  const bodyX = Math.round(cx - bodyW / 2);
+  const bodyY = Math.round(cy - bodyH / 2);
+  const sx = bodyX + bezel;
+  const sy = bodyY + bezel;
+
+  ctx.save();
+  ctx.shadowColor = 'rgba(0,0,0,0.4)';
+  ctx.shadowBlur = Math.round(screenW * 0.09);
+  ctx.shadowOffsetY = Math.round(screenW * 0.035);
+  roundRectPath(ctx, bodyX, bodyY, bodyW, bodyH, Math.round(screenW * 0.155));
+  ctx.fillStyle = '#0b0b0a';
+  ctx.fill();
+  ctx.restore();
+
+  ctx.save();
+  roundRectPath(ctx, sx, sy, screenW, screenH, Math.round(screenW * 0.135));
+  ctx.clip();
+  drawInto(ctx, img, sx, sy, screenW, screenH);
+  ctx.restore();
+
+  const iw = Math.round(screenW * 0.3);
+  const ih = Math.round(screenW * 0.085);
+  roundRectPath(ctx, Math.round(sx + (screenW - iw) / 2), Math.round(sy + bezel * 1.1), iw, ih, ih / 2);
+  ctx.fillStyle = '#050505';
+  ctx.fill();
+  return { bodyH };
+}
+
+/** Android (Pixel-neutral): dark unibody, uniform bezel, centred punch-hole camera. */
+export function drawAndroidPhoneFrame(ctx, img, cx, cy, screenW) {
+  const screenH = screenW * (img.height / img.width);
+  const bezel = Math.round(screenW * 0.035);
+  const bodyW = screenW + bezel * 2;
+  const bodyH = screenH + bezel * 2;
+  const bodyX = Math.round(cx - bodyW / 2);
+  const bodyY = Math.round(cy - bodyH / 2);
+  const sx = bodyX + bezel;
+  const sy = bodyY + bezel;
+
+  ctx.save();
+  ctx.shadowColor = 'rgba(0,0,0,0.4)';
+  ctx.shadowBlur = Math.round(screenW * 0.09);
+  ctx.shadowOffsetY = Math.round(screenW * 0.035);
+  roundRectPath(ctx, bodyX, bodyY, bodyW, bodyH, Math.round(screenW * 0.13));
+  ctx.fillStyle = '#0b0b0a';
+  ctx.fill();
+  ctx.restore();
+
+  ctx.save();
+  roundRectPath(ctx, sx, sy, screenW, screenH, Math.round(screenW * 0.105));
+  ctx.clip();
+  drawInto(ctx, img, sx, sy, screenW, screenH);
+  ctx.restore();
+
+  // Centred punch-hole camera near the top edge.
+  ctx.beginPath();
+  ctx.arc(sx + screenW / 2, sy + bezel * 1.6, Math.round(screenW * 0.018), 0, Math.PI * 2);
+  ctx.fillStyle = '#050505';
+  ctx.fill();
+  return { bodyH };
+}
+
+/** iPad: dark unibody, tight even bezel, gentler corners, no island. */
+export function drawIpadFrame(ctx, img, cx, cy, screenW) {
+  const screenH = screenW * (img.height / img.width);
+  const bezel = Math.round(screenW * 0.024);
+  const bodyW = screenW + bezel * 2;
+  const bodyH = screenH + bezel * 2;
+  const bodyX = Math.round(cx - bodyW / 2);
+  const bodyY = Math.round(cy - bodyH / 2);
+  const sx = bodyX + bezel;
+  const sy = bodyY + bezel;
+
+  ctx.save();
+  ctx.shadowColor = 'rgba(0,0,0,0.36)';
+  ctx.shadowBlur = Math.round(screenW * 0.06);
+  ctx.shadowOffsetY = Math.round(screenW * 0.024);
+  roundRectPath(ctx, bodyX, bodyY, bodyW, bodyH, Math.round(screenW * 0.05));
+  ctx.fillStyle = '#0b0b0a';
+  ctx.fill();
+  ctx.restore();
+
+  ctx.save();
+  roundRectPath(ctx, sx, sy, screenW, screenH, Math.round(screenW * 0.035));
+  ctx.clip();
+  drawInto(ctx, img, sx, sy, screenW, screenH);
+  ctx.restore();
+  return { bodyH };
+}
+
+/** Apple Watch: round dark unibody, thin ring, a crown nub; the square capture is clipped to the circle. */
+export function drawWatchFrame(ctx, img, cx, cy, diameter) {
+  const screenR = diameter / 2;
+  const bezel = Math.round(diameter * 0.05);
+  const bodyR = screenR + bezel;
+
+  ctx.save();
+  ctx.shadowColor = 'rgba(0,0,0,0.4)';
+  ctx.shadowBlur = Math.round(diameter * 0.08);
+  ctx.shadowOffsetY = Math.round(diameter * 0.03);
+  ctx.beginPath();
+  ctx.arc(cx, cy, bodyR, 0, Math.PI * 2);
+  ctx.fillStyle = '#0b0b0a';
+  ctx.fill();
+  ctx.restore();
+
+  // Crown nub on the right edge.
+  const crownW = Math.round(diameter * 0.03);
+  const crownH = Math.round(diameter * 0.12);
+  roundRectPath(ctx, cx + bodyR - Math.round(crownW * 0.35), cy - crownH / 2, crownW, crownH, Math.round(crownW * 0.5));
+  ctx.fillStyle = '#1a1a18';
+  ctx.fill();
+
+  ctx.save();
+  ctx.beginPath();
+  ctx.arc(cx, cy, screenR, 0, Math.PI * 2);
+  ctx.clip();
+  drawInto(ctx, img, cx - screenR, cy - screenR, diameter, diameter);
+  ctx.restore();
+  return { bodyH: bodyR * 2 };
+}
+
+/** Dispatch by frame id → the draw fn (null for unsupported → caller falls back to a plain still). */
+export function frameFor(id) {
+  return {
+    phone: drawPhoneFrame, iphone: drawPhoneFrame,
+    android: drawAndroidPhoneFrame,
+    ipad: drawIpadFrame, tablet: drawIpadFrame,
+    watch: drawWatchFrame,
+  }[id] || null; // 'mac' etc. → no added frame
+}
+
+/** Infer a frame id from a screenshot target id (order matters: play-phone → android before → phone). */
+export function inferFrame(target) {
+  if (/watch|wear/.test(target)) return 'watch';
+  if (/ipad|tablet/.test(target)) return 'ipad';
+  if (/play.*phone|android/.test(target)) return 'android';
+  if (/iphone|phone/.test(target)) return 'phone';
+  return null;
+}

package/src/graphic.mjs

@@ -0,0 +1,77 @@
+/**
+ * Feature graphic — Google Play's 1024×500 listing banner (no alpha). A brand matte with the logo +
+ * wordmark + tagline on the left and a tilted device (a hero capture in a frame) bleeding off the right.
+ * Ported/generalized from a production store-asset pipeline; brand-driven.
+ */
+import fs from 'node:fs';
+import path from 'node:path';
+import { createCanvas, loadImage } from '@napi-rs/canvas';
+import { font, hexA, roundRectPath, fillVerticalGradient, radialGlow } from './canvas.mjs';
+import { frameFor, drawAndroidPhoneFrame } from './frames.mjs';
+import { rgbPngBuffer } from './png.mjs';
+
+const DEFAULT = { matteTop: '#052E16', matteBottom: '#0b0b0a', glow: null, glowAlpha: 0.22 };
+
+/** Split a tagline into ≤2 lines (on the first sentence break, else the whole thing). */
+function splitTagline(t) {
+  if (!t) return ['', ''];
+  const m = t.match(/^(.*?[.!?])\s+(.*)$/);
+  return m ? [m[1], m[2]] : [t, ''];
+}
+
+/** Build the 1024×500 feature graphic → writes a no-alpha PNG. `frame`: which device frame for the hero. */
+export async function buildFeatureGraphic({ W = 1024, H = 500, brand, theme, heroPath, outFile, frame = 'android' }) {
+  const th = { ...DEFAULT, ...(theme || {}) };
+  const glow = th.glow || brand.sub;
+  const c = createCanvas(W, H);
+  const ctx = c.getContext('2d');
+  fillVerticalGradient(ctx, W, H, th.matteTop, th.matteBottom);
+  radialGlow(ctx, W * 0.3, H * 0.5, W * 0.5, glow, th.glowAlpha);
+
+  const leftX = 72;
+  const iconSize = 92;
+  const logo = brand.logo && fs.existsSync(brand.logo) ? await loadImage(brand.logo) : null;
+  if (logo) {
+    ctx.save();
+    roundRectPath(ctx, leftX, 70, iconSize, iconSize, iconSize * 0.22);
+    ctx.clip();
+    ctx.drawImage(logo, leftX, 70, iconSize, iconSize);
+    ctx.restore();
+  }
+  ctx.textAlign = 'left';
+  ctx.textBaseline = 'middle';
+  ctx.font = font(76, 'bold');
+  ctx.fillStyle = brand.title;
+  ctx.fillText(brand.name || 'App', leftX + (logo ? iconSize + 26 : 0), 70 + iconSize / 2 + 4);
+
+  ctx.textBaseline = 'top';
+  const [t1, t2] = splitTagline(brand.tagline);
+  ctx.font = font(48, 'bold');
+  ctx.fillStyle = brand.title;
+  if (t1) ctx.fillText(t1, leftX, 220);
+  if (t2) {
+    ctx.fillStyle = brand.sub;
+    ctx.fillText(t2, leftX, 278);
+  }
+  if (brand.endsub) {
+    ctx.font = font(28, 'regular');
+    ctx.fillStyle = hexA(brand.sub, 0.85);
+    ctx.fillText(brand.endsub, leftX, 352);
+  }
+
+  if (heroPath && fs.existsSync(heroPath)) {
+    const hero = await loadImage(heroPath);
+    const pc = createCanvas(640, 960);
+    const pctx = pc.getContext('2d');
+    (frameFor(frame) || drawAndroidPhoneFrame)(pctx, hero, pc.width / 2, pc.height / 2, 250);
+    ctx.save();
+    ctx.translate(W - 150, H / 2 + 40);
+    ctx.rotate(-0.12);
+    ctx.drawImage(pc, -pc.width / 2, -pc.height / 2);
+    ctx.restore();
+  }
+
+  fs.mkdirSync(path.dirname(outFile), { recursive: true });
+  fs.writeFileSync(outFile, rgbPngBuffer(c));
+  return { outFile, W, H };
+}

package/src/index.mjs

@@ -0,0 +1,12 @@
+/** Programmatic API — use the engine directly without the CLI. */
+export { buildVideo } from './video.mjs';
+export { buildReel } from './reel.mjs';
+export { buildPremium } from './premium.mjs';
+export { buildDeviceScreenshots } from './screenshots.mjs';
+export { buildFeatureGraphic } from './graphic.mjs';
+export { renderStill } from './still.mjs';
+export { rgbPngBuffer } from './png.mjs';
+export { loadConfig } from './config.mjs';
+export { registerFonts } from './fonts.mjs';
+export { VIDEO_TARGETS, IMAGE_TARGETS, videoTarget } from './specs.mjs';
+export { run } from './cli.mjs';

package/src/png.mjs

@@ -0,0 +1,50 @@
+/**
+ * Encode a canvas as a **lossless RGB PNG with no alpha channel** (PNG colour type 2).
+ *
+ * App Store Connect rejects any screenshot carrying an alpha channel ("Images can't contain alpha channels
+ * or transparencies"), and Google Play wants "24-bit PNG (no alpha)" too. @napi-rs/canvas always emits
+ * RGBA, so we re-encode from the raw pixels here. Dependency-free (Node `zlib`), lossless (deflate level 9
+ * over the exact RGB samples). Every still fills an opaque background, so dropping the (fully-opaque) alpha
+ * is a pure flatten with zero visual change.
+ */
+import zlib from 'node:zlib';
+
+export function rgbPngBuffer(canvas) {
+  const w = canvas.width;
+  const h = canvas.height;
+  const { data } = canvas.getContext('2d').getImageData(0, 0, w, h); // RGBA, row-major, 8-bit
+
+  // PNG scanlines with filter type 0 (none): [0, R,G,B, R,G,B, …] per row.
+  const raw = Buffer.allocUnsafe(h * (1 + w * 3));
+  let p = 0;
+  for (let y = 0; y < h; y++) {
+    raw[p++] = 0;
+    let src = y * w * 4;
+    for (let x = 0; x < w; x++) {
+      raw[p++] = data[src];
+      raw[p++] = data[src + 1];
+      raw[p++] = data[src + 2];
+      src += 4;
+    }
+  }
+  const idat = zlib.deflateSync(raw, { level: 9 });
+
+  const chunk = (type, body) => {
+    const len = Buffer.alloc(4);
+    len.writeUInt32BE(body.length, 0);
+    const typeBuf = Buffer.from(type, 'ascii');
+    const crc = Buffer.alloc(4);
+    crc.writeUInt32BE(zlib.crc32(Buffer.concat([typeBuf, body])) >>> 0, 0);
+    return Buffer.concat([len, typeBuf, body, crc]);
+  };
+
+  const ihdr = Buffer.alloc(13);
+  ihdr.writeUInt32BE(w, 0);
+  ihdr.writeUInt32BE(h, 4);
+  ihdr[8] = 8; // bit depth
+  ihdr[9] = 2; // colour type 2 = truecolour (RGB), no alpha
+  // bytes 10–12 (compression, filter, interlace) stay 0
+
+  const sig = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+  return Buffer.concat([sig, chunk('IHDR', ihdr), chunk('IDAT', idat), chunk('IEND', Buffer.alloc(0))]);
+}