screencraft 0.1.0

package/src/commands/init.js

@@ -0,0 +1,119 @@
+/**
+ * src/commands/init.js
+ * --------------------
+ * Generates screencraft.config.js and .mcp.json in the project root.
+ * Auto-fills detected values where possible.
+ */
+
+const path  = require('path');
+const fs    = require('fs');
+const chalk = require('chalk');
+
+const { detectFramework, detectBrand } = require('../detectors/detectBrand');
+
+module.exports = async function init() {
+  const ROOT = process.cwd();
+
+  // ── Detect what we can ────────────────────────────────────────
+  let framework = { name: 'unknown', platform: 'ios' };
+  let brand = {};
+
+  try {
+    console.log(chalk.dim('  Detecting project...'));
+    framework = await detectFramework(ROOT);
+    brand = await detectBrand(ROOT, {});
+    console.log(chalk.hex('#6BC46A')(`  ✓ Detected: ${framework.name}`));
+  } catch {
+    console.log(chalk.dim('  Could not auto-detect framework — using defaults'));
+  }
+
+  // ── screencraft.config.js ─────────────────────────────────────
+  const configPath = path.join(ROOT, 'screencraft.config.js');
+
+  if (fs.existsSync(configPath)) {
+    console.log(chalk.dim('  screencraft.config.js already exists — skipping'));
+  } else {
+    const configContent = `/**
+ * screencraft.config.js
+ * ---------------------
+ * All fields are optional. ScreenCraft auto-detects everything it can.
+ * Override here if detection is wrong or you want different values.
+ *
+ * Docs: https://screencraft.dev/docs
+ */
+
+module.exports = {
+  app: {
+    name: ${brand.appName ? `"${brand.appName}"` : 'null'},        // App display name
+    tagline: null,            // One-line tagline (used in video title card)
+  },
+
+  brand: {
+    primary:   ${brand.primary ? `"${brand.primary}"` : 'null'},   // e.g. "#1B3A6B" — null = auto-detect
+    secondary: ${brand.secondary ? `"${brand.secondary}"` : 'null'},
+    accent:    ${brand.accent ? `"${brand.accent}"` : 'null'},
+    background: ${brand.background ? `"${brand.background}"` : 'null'},
+    icon:      null,          // Path to app icon PNG (1024x1024). null = auto-detect
+    font:      null,          // e.g. "Inter" — null = auto-detect
+  },
+
+  screenshots: [
+    // Define screens for auto-capture (optional).
+    // If omitted, use the web UI to capture interactively.
+    // { route: "/home", label: "Home screen" },
+    // { route: "/settings", label: "Settings" },
+  ],
+
+  output: {
+    dir: "./launch-kit",     // Output directory
+  },
+};
+`;
+    fs.writeFileSync(configPath, configContent);
+    console.log(chalk.hex('#6BC46A')('  ✓ Created screencraft.config.js'));
+  }
+
+  // ── .mcp.json ─────────────────────────────────────────────────
+  const mcpPath = path.join(ROOT, '.mcp.json');
+
+  if (fs.existsSync(mcpPath)) {
+    // Check if screencraft is already in it
+    try {
+      const existing = JSON.parse(fs.readFileSync(mcpPath, 'utf8'));
+      if (existing.mcpServers?.screencraft) {
+        console.log(chalk.dim('  .mcp.json already has screencraft — skipping'));
+      } else {
+        // Add screencraft to existing config
+        existing.mcpServers = existing.mcpServers || {};
+        existing.mcpServers.screencraft = {
+          type: 'stdio',
+          command: 'npx',
+          args: ['screencraft', '--mcp'],
+        };
+        fs.writeFileSync(mcpPath, JSON.stringify(existing, null, 2) + '\n');
+        console.log(chalk.hex('#6BC46A')('  ✓ Added screencraft to .mcp.json'));
+      }
+    } catch {
+      console.log(chalk.dim('  .mcp.json exists but could not parse — skipping'));
+    }
+  } else {
+    const mcpContent = {
+      mcpServers: {
+        screencraft: {
+          type: 'stdio',
+          command: 'npx',
+          args: ['screencraft', '--mcp'],
+        },
+      },
+    };
+    fs.writeFileSync(mcpPath, JSON.stringify(mcpContent, null, 2) + '\n');
+    console.log(chalk.hex('#6BC46A')('  ✓ Created .mcp.json (MCP integration for Claude Code/Desktop)'));
+  }
+
+  // ── Done ──────────────────────────────────────────────────────
+  console.log('');
+  console.log(chalk.dim('  Next steps:'));
+  console.log('  ' + chalk.white('screencraft serve') + chalk.dim('   — open the web UI'));
+  console.log('  ' + chalk.white('screencraft launch') + chalk.dim('  — run the full pipeline'));
+  console.log('');
+};

package/src/commands/launch.js

@@ -0,0 +1,405 @@
+/**
+ * src/commands/launch.js
+ * ----------------------
+ * Main pipeline orchestrator. Runs in sequence:
+ *   1. Detect framework + brand
+ *   2. Capture or load screenshots
+ *   3. Suggest headline text via Claude API
+ *   4. User approves/edits text interactively
+ *   5. Gate: check license key
+ *   6. Composite PSDs
+ *   7. Submit render job (AE video)
+ *   8. Download + unpack bundle
+ *   9. Open output folder
+ */
+
+const path   = require('path');
+const fs     = require('fs');
+const chalk  = require('chalk');
+const ora    = require('ora');
+const inquirer = require('inquirer');
+
+const { detectFramework, detectBrand } = require('../detectors/detectBrand');
+const { captureScreenshots }           = require('../detectors/simulator');
+const { suggestHeadlines }             = require('../generators/copy');
+const { compositePSD }                 = require('../generators/compositePSD');
+const { validateKey, getStoredKey }    = require('../auth/keystore');
+const { submitRenderJob, pollJob }     = require('../pipeline/queue');
+const { downloadBundle }               = require('../pipeline/download');
+const { prepareAEProject, renderLocally } = require('../pipeline/aeSwap');
+
+const ROOT = process.cwd();
+
+module.exports = async function launch(args) {
+  let screenshotsOnly = args.includes('--screenshots-only');
+
+  // ── Load config ───────────────────────────────────────────────
+  const configPath = path.join(ROOT, 'screencraft.config.js');
+  const config = fs.existsSync(configPath)
+    ? require(configPath)
+    : {};
+
+  const outputDir = path.join(ROOT, config.output?.dir || './launch-kit');
+  fs.mkdirSync(outputDir, { recursive: true });
+  fs.mkdirSync(path.join(outputDir, 'screenshots'), { recursive: true });
+  fs.mkdirSync(path.join(outputDir, 'video'),       { recursive: true });
+  fs.mkdirSync(path.join(outputDir, 'source'),      { recursive: true });
+  fs.mkdirSync(path.join(outputDir, 'brand'),        { recursive: true });
+
+  // ── PHASE 1: Detect ───────────────────────────────────────────
+  log.step('1/5', 'Detecting project...');
+  const framework = await detectFramework(ROOT);
+  const brand     = await detectBrand(ROOT, config);
+
+  log.success(`Framework:   ${framework.name}`);
+  log.success(`App name:    ${brand.appName || '(not found — set app.name in config)'}`);
+  log.success(`Primary:     ${brand.primary}`);
+  log.success(`Accent:      ${brand.accent}`);
+  log.success(`Icon:        ${brand.icon ? 'found' : chalk.yellow('not found')}`);
+  log.success(`Font:        ${brand.font?.family || chalk.yellow('not found (using system font)')}`);
+  log.success(`Logo:        ${brand.logo ? 'found' : chalk.yellow('not found')}`);
+  console.log('');
+
+  // ── PHASE 2: Screenshots ──────────────────────────────────────
+  log.step('2/5', 'Capturing screenshots...');
+
+  let screenshots;
+
+  try {
+    screenshots = await captureScreenshots(ROOT, framework, {
+      screenConfigs: config.screenshots || null,
+      outputDir:     outputDir,
+      log,
+    });
+  } catch (err) {
+    log.warn(err.message);
+    process.exit(1);
+  }
+  console.log('');
+
+  // ── PHASE 3: AI Headline Suggestions ─────────────────────────
+  log.step('3/5', 'Generating headline suggestions with AI...');
+  log.info('Sending screenshots to Claude...');
+
+  const suggestions = await suggestHeadlines(screenshots, brand, config);
+  console.log('');
+
+  // ── PHASE 4: Interactive approval ────────────────────────────
+  log.step('4/5', 'Approve headline text for each screen');
+  console.log(chalk.dim('  Format: white text + accent color word'));
+  console.log(chalk.dim('  Press enter to accept suggestion, or type a replacement'));
+  console.log('');
+
+  const approvedTexts = [];
+
+  for (let i = 0; i < screenshots.length; i++) {
+    const screen = screenshots[i];
+    const opts   = suggestions[i];
+
+    console.log(chalk.hex('#A78BFA')(`  Screen ${i + 1}:`), chalk.dim(path.basename(screen.file)));
+    console.log(chalk.dim(`  ↳ ${opts.description || ''}`));
+    console.log('');
+
+    // Show the 3 options
+    opts.options.forEach((o, idx) => {
+      console.log(`    ${chalk.dim(`[${idx + 1}]`)} ${chalk.white(o.white)} ${chalk.hex('#A78BFA')(o.accent)}`);
+    });
+    console.log(`    ${chalk.dim('[c]')} custom`);
+    console.log('');
+
+    const { choice } = await inquirer.prompt([{
+      type:    'input',
+      name:    'choice',
+      message: chalk.dim('  Select (1/2/3/c) or press enter for [1]:'),
+      default: '1',
+    }]);
+
+    let approved;
+    if (choice === 'c' || choice === 'C') {
+      const { custom } = await inquirer.prompt([{
+        type:    'input',
+        name:    'custom',
+        message: chalk.dim('  Enter text (use | to split white|accent):'),
+      }]);
+      const [w, a] = custom.includes('|') ? custom.split('|') : [custom, ''];
+      approved = { white: w.trim(), accent: a.trim() };
+    } else {
+      const idx = Math.max(0, Math.min(2, parseInt(choice || '1') - 1));
+      approved  = opts.options[idx] || opts.options[0];
+    }
+
+    approvedTexts.push(approved);
+    log.success(`Approved: "${approved.white} ${approved.accent}"`);
+    console.log('');
+  }
+
+  // ── GATE: License check ───────────────────────────────────────
+  if (!screenshotsOnly) {
+    console.log(chalk.dim('─────────────────────────────────────'));
+    const key  = getStoredKey();
+    let tier   = null;
+
+    if (key) {
+      log.info('Validating license key...');
+      tier = await validateKey(key);
+      if (tier) {
+        log.success(`License: ${tier} tier active`);
+      } else {
+        log.warn('License key invalid or expired.');
+      }
+    }
+
+    if (!tier) {
+      console.log('');
+      console.log(chalk.hex('#C9A84C')('  A license key is required to generate the video + AE file.'));
+      console.log(chalk.dim('  Get one at: ') + chalk.white('screencraft.dev/activate'));
+      console.log('');
+
+      const { enteredKey } = await inquirer.prompt([{
+        type:    'input',
+        name:    'enteredKey',
+        message: chalk.dim('  Enter license key (or press enter to generate screenshots only):'),
+      }]);
+
+      if (enteredKey.trim()) {
+        tier = await validateKey(enteredKey.trim());
+        if (!tier) {
+          log.warn('Invalid key. Continuing with screenshots only.');
+          screenshotsOnly = true;
+        }
+      } else {
+        screenshotsOnly = true;
+      }
+    }
+    console.log('');
+  }
+
+  // ── PHASE 5: Generate ─────────────────────────────────────────
+  log.step('5/5', 'Generating launch kit...');
+  console.log('');
+
+  // Always: composite App Store PNGs
+  const spinner = ora({ text: 'Compositing device mockups...', color: 'magenta' }).start();
+
+  const psdOutputs = [];
+  for (let i = 0; i < screenshots.length; i++) {
+    const screen = screenshots[i];
+    const text   = approvedTexts[i];
+    const outPng = path.join(outputDir, 'screenshots', `screen_${String(i + 1).padStart(2, '0')}.png`);
+    const outPsd = path.join(outputDir, 'source',      `screen_${String(i + 1).padStart(2, '0')}.psd`);
+
+    spinner.text = `Compositing screen ${i + 1} of ${screenshots.length}...`;
+
+    await compositePSD({
+      screenshotPath: screen.file,
+      headlineWhite:  text.white,
+      headlineAccent: text.accent,
+      brand,
+      font:           brand.font || {},
+      outputPng:      outPng,
+      outputPsd:      outPsd,
+      writePsd:       !screenshotsOnly,
+    });
+
+    psdOutputs.push({ png: outPng, psd: outPsd });
+  }
+
+  spinner.succeed('Screenshots composited');
+
+  // Copy brand assets into output folder
+  const assetsDir = path.join(outputDir, 'brand');
+  fs.mkdirSync(assetsDir, { recursive: true });
+
+  const copyAsset = (src, destName) => {
+    try {
+      if (src && fs.existsSync(src)) {
+        fs.copyFileSync(src, path.join(assetsDir, destName));
+        return true;
+      }
+    } catch {}
+    return false;
+  };
+
+  copyAsset(brand.icon, `app-icon${path.extname(brand.icon || '.png')}`);
+  copyAsset(brand.logo, `logo${path.extname(brand.logo || '.png')}`);
+  if (brand.font?.file) copyAsset(brand.font.file, `font${path.extname(brand.font.file)}`);
+
+  // Generate brand kit README
+  generateReadme(outputDir, brand, approvedTexts, screenshots, screenshotsOnly);
+
+  if (!screenshotsOnly) {
+    // Prepare AE project with swapped footage + manifest
+    const aeSpinner = ora({ text: 'Preparing After Effects project...', color: 'magenta' }).start();
+
+    try {
+      const ae = await prepareAEProject({
+        brand,
+        texts:       approvedTexts,
+        screenshots,
+        outputDir,
+        log,
+      });
+
+      if (ae.aepPath) {
+        aeSpinner.succeed('AE project prepared');
+
+        // Try local render if aerender is available
+        if (ae.canRender) {
+          const renderSpinner = ora({ text: 'Rendering video...', color: 'magenta' }).start();
+          try {
+            const videoPath = await renderLocally({
+              aepPath:    ae.aepPath,
+              outputDir,
+              onProgress: (step) => { renderSpinner.text = step; },
+            });
+            renderSpinner.succeed('Video rendered');
+          } catch (err) {
+            renderSpinner.warn('Local render failed — open source/app-launch.aep in After Effects');
+          }
+        } else {
+          log.info('Open source/app-launch.aep in After Effects to render the video');
+          log.info('Or run: File → Scripts → Run Script File → ae_swap.jsx');
+        }
+      } else {
+        aeSpinner.warn('No AE template found — skipping video');
+      }
+    } catch (err) {
+      aeSpinner.warn('AE project preparation failed: ' + err.message);
+    }
+  }
+
+  // ── Done ──────────────────────────────────────────────────────
+  console.log('');
+  console.log(chalk.dim('─────────────────────────────────────'));
+  console.log(chalk.hex('#6BC46A')('  ✓ Launch kit ready → ') + chalk.white(outputDir));
+  console.log('');
+  console.log(chalk.dim('  screenshots/') + chalk.hex('#6BC46A')(`  ← ${screenshots.length} composited + ${screenshots.length} raw PNGs`));
+  console.log(chalk.dim('  brand/      ') + chalk.hex('#6BC46A')('  ← icon, logo, font'));
+
+  if (!screenshotsOnly) {
+    console.log(chalk.dim('  source/     ') + chalk.hex('#6BC46A')('  ← app-launch.aep + PSDs'));
+    console.log(chalk.dim('  video/      ') + chalk.hex('#6BC46A')('  ← preview.mp4'));
+  }
+
+  console.log(chalk.dim('  README.md   ') + chalk.hex('#6BC46A')('  ← brand kit + checklist'));
+  console.log('');
+
+  if (screenshotsOnly) {
+    console.log(chalk.hex('#C9A84C')('  Video + AE file → screencraft.dev/activate'));
+    console.log('');
+  }
+
+  // Open the output folder
+  const { exec } = require('child_process');
+  exec(`open "${outputDir}"`);
+};
+
+// ── Helpers ──────────────────────────────────────────────────────
+const log = {
+  step:    (n, msg) => console.log(chalk.dim(`[${n}]`) + ' ' + chalk.white(msg)),
+  success: (msg)    => console.log('  ' + chalk.hex('#6BC46A')('✓') + ' ' + chalk.dim(msg)),
+  info:    (msg)    => console.log('  ' + chalk.hex('#6AABDD')('↳') + ' ' + chalk.dim(msg)),
+  warn:    (msg)    => console.log('  ' + chalk.hex('#C9A84C')('⚠') + ' ' + chalk.hex('#C9A84C')(msg)),
+};
+
+function generateReadme(outputDir, brand, texts, screenshots, screenshotsOnly) {
+  const appName = brand.appName || 'App';
+  const date = new Date().toLocaleDateString();
+
+  // ── Brand Colors section
+  const colors = [
+    ['Primary',    brand.primary],
+    ['Secondary',  brand.secondary],
+    ['Accent',     brand.accent],
+    ['Background', brand.background],
+  ].filter(([, hex]) => hex);
+
+  const colorRows = colors
+    .map(([name, hex]) => `| ${name} | \`${hex}\` | ![${name}](https://via.placeholder.com/24/${hex.replace('#', '')}/${hex.replace('#', '')}.png) |`)
+    .join('\n');
+
+  // ── Brand Assets section
+  const assetRows = [];
+  if (brand.icon) assetRows.push('| App Icon | `brand/app-icon' + path.extname(brand.icon) + '` | 1024×1024 PNG |');
+  if (brand.logo) assetRows.push('| Logo | `brand/logo' + path.extname(brand.logo) + '` | Vector/PNG |');
+  if (brand.font?.file) assetRows.push(`| Font | \`brand/font${path.extname(brand.font.file)}\` | ${brand.font.family || 'Custom'}${brand.font.weight ? ' ' + brand.font.weight : ''} |`);
+
+  // ── Screenshots section
+  const screenRows = screenshots.map((s, i) => {
+    const t = texts[i];
+    const headline = t ? `"${t.white} **${t.accent}**"` : '—';
+    return `| ${i + 1} | \`screenshots/screen_${String(i + 1).padStart(2, '0')}.png\` | ${headline} | \`screenshots/${path.basename(s.file)}\` |`;
+  }).join('\n');
+
+  const readme = `# Launch Kit — ${appName}
+
+> Generated by [ScreenCraft](https://screencraft.dev) on ${date}
+
+---
+
+## Brand Colors
+
+| Name | Hex | Swatch |
+|------|-----|--------|
+${colorRows}
+
+## Brand Assets
+
+| Asset | File | Details |
+|-------|------|---------|
+${assetRows.length > 0 ? assetRows.join('\n') : '| — | No assets detected | Set in screencraft.config.js |'}
+
+${brand.font?.family ? `**Font:** ${brand.font.family}${brand.font.weight ? ' (' + brand.font.weight + ')' : ''}` : '**Font:** System default (no custom font detected)'}
+
+---
+
+## Screenshots
+
+| # | Composited | Headline | Raw |
+|---|------------|----------|-----|
+${screenRows}
+
+---
+
+## Files
+
+| Path | Description |
+|------|-------------|
+| \`screenshots/\` | App Store-ready composited PNGs (1290×2796) |
+| \`screenshots/*_raw.png\` | Original simulator captures |
+| \`brand/\` | Extracted brand assets (icon, logo, font) |
+${screenshotsOnly ? '' : `| \`source/app-launch.aep\` | Editable After Effects project |
+| \`source/*.psd\` | Layered Photoshop files |
+| \`video/preview.mp4\` | App Store preview video |
+`}| \`README.md\` | This file — brand kit reference |
+
+---
+
+## App Store Submission Checklist
+
+### iOS App Store
+- [ ] Screenshots: 6.7" (1290×2796) — required
+- [ ] Screenshots: 6.1" (1179×2556) — recommended
+- [ ] App preview video: up to 30s, 9:16 vertical
+- [ ] Icon: 1024×1024 PNG, no alpha, no rounded corners
+
+### Google Play
+- [ ] Feature graphic: 1024×500
+- [ ] Screenshots: min 2, up to 8, 16:9 or 9:16
+- [ ] Hi-res icon: 512×512
+
+---
+
+## Regenerate
+
+\`\`\`bash
+cd your-app-project
+npx screencraft launch
+\`\`\`
+
+${screenshotsOnly ? `> Video + AE project file available with a license key — [screencraft.dev/activate](https://screencraft.dev/activate)\n` : ''}---
+[screencraft.dev](https://screencraft.dev)
+`;
+
+  fs.writeFileSync(path.join(outputDir, 'README.md'), readme);
+}