screencraft 0.1.0

package/src/server/session.js

@@ -0,0 +1,36 @@
+/**
+ * src/server/session.js
+ * ---------------------
+ * Shared session state between Express server and MCP server.
+ * Single-user tool — one session at a time.
+ */
+
+const session = {
+  projectPath: null,
+  outputDir:   null,
+  framework:   null,
+  brand:       null,
+  screenshots: [],
+  suggestions: [],
+  approvedTexts: [],
+  selectedTemplate: null,
+  renderStatus: { phase: 'idle', progress: 0, message: '' },
+  outputs: [],
+  _simDevice: null,
+};
+
+function resetSession() {
+  session.projectPath = null;
+  session.outputDir   = null;
+  session.framework   = null;
+  session.brand       = null;
+  session.screenshots = [];
+  session.suggestions = [];
+  session.approvedTexts = [];
+  session.selectedTemplate = null;
+  session.renderStatus = { phase: 'idle', progress: 0, message: '' };
+  session.outputs = [];
+  session._simDevice = null;
+}
+
+module.exports = { session, resetSession };

package/templates/ae_swap.jsx

@@ -0,0 +1,284 @@
+/**
+ * templates/ae_swap.jsx
+ * ---------------------
+ * ExtendScript for After Effects.
+ *
+ * Reads a render_manifest.json from the same directory as the AEP,
+ * then walks all comps/layers looking for [SWAP_*] tags and replaces:
+ *
+ *   [SWAP_COLOR_*]       — updates Color Control effect value
+ *   [SWAP_TEXT_*]        — updates source text
+ *   [SWAP_SCREENSHOT_*]  — replaces footage item with new PNG
+ *   [SWAP_IMAGE_*]       — replaces footage item with new image
+ *
+ * Usage:
+ *   1. Open the AE template project
+ *   2. File → Scripts → Run Script File → ae_swap.jsx
+ *   -- or --
+ *   aerender -project "template.aep" -s ae_swap.jsx
+ *
+ * The script expects render_manifest.json in the project's root folder:
+ * {
+ *   "brand": {
+ *     "primary": "#7068B1",
+ *     "secondary": "#435B98",
+ *     "accent": "#7068b1",
+ *     "background": "#1a1a2e",
+ *     "appName": "My App"
+ *   },
+ *   "texts": [
+ *     { "white": "Transform your", "accent": "inner voice" },
+ *     ...
+ *   ],
+ *   "screenshots": [
+ *     { "file": "screenshots/screen_01_raw.png" },
+ *     ...
+ *   ]
+ * }
+ */
+
+(function () {
+  // ── JSON polyfill (ExtendScript has no native JSON) ─────────────
+  if (typeof JSON === "undefined") {
+    JSON = {};
+  }
+  if (typeof JSON.parse !== "function") {
+    JSON.parse = function (str) {
+      return eval("(" + str + ")");
+    };
+  }
+  if (typeof JSON.stringify !== "function") {
+    JSON.stringify = function (obj) {
+      if (obj === null) return "null";
+      if (typeof obj === "string") return '"' + obj.replace(/"/g, '\\"') + '"';
+      if (typeof obj === "number" || typeof obj === "boolean") return String(obj);
+      if (obj instanceof Array) {
+        var arr = [];
+        for (var i = 0; i < obj.length; i++) arr.push(JSON.stringify(obj[i]));
+        return "[" + arr.join(",") + "]";
+      }
+      if (typeof obj === "object") {
+        var pairs = [];
+        for (var k in obj) {
+          if (obj.hasOwnProperty(k)) {
+            pairs.push('"' + k + '":' + JSON.stringify(obj[k]));
+          }
+        }
+        return "{" + pairs.join(",") + "}";
+      }
+      return "undefined";
+    };
+  }
+
+  // ── Locate manifest ────────────────────────────────────────────
+  var projectFolder = app.project.file.parent;
+  var manifestFile = new File(projectFolder.fsName + "/render_manifest.json");
+
+  if (!manifestFile.exists) {
+    alert("ScreenCraft: render_manifest.json not found in:\n" + projectFolder.fsName);
+    return;
+  }
+
+  manifestFile.open("r");
+  var raw = manifestFile.read();
+  manifestFile.close();
+
+  var manifest = JSON.parse(raw);
+  var brand = manifest.brand || {};
+  var texts = manifest.texts || [];
+  var screenshots = manifest.screenshots || [];
+
+  // ── Build color map ────────────────────────────────────────────
+  var colorMap = {
+    "primary":    brand.primary    || null,
+    "secondary":  brand.secondary  || null,
+    "accent":     brand.accent     || null,
+    "background": brand.background || null
+  };
+
+  // ── Build text map ─────────────────────────────────────────────
+  // Per-scene numbered text (for AE with multiple scenes in one comp):
+  //   [SWAP_TEXT_1_headline]       → texts[0].white
+  //   [SWAP_TEXT_1_headline_accent]→ texts[0].accent
+  //   [SWAP_TEXT_2_headline]       → texts[1].white
+  //   ...
+  // Unnumbered fallback (for single-scene or PSD):
+  //   [SWAP_TEXT_headline]         → texts[0].white
+  //   [SWAP_TEXT_headline_accent]  → texts[0].accent
+  // Global:
+  //   [SWAP_TEXT_app_name]         → brand.appName
+  //   [SWAP_TEXT_tagline]          → brand.tagline
+  var textMap = {
+    "headline":        texts[0] ? texts[0].white  : null,
+    "headline_accent": texts[0] ? texts[0].accent : null,
+    "app_name":        brand.appName || null,
+    "tagline":         brand.tagline || null
+  };
+
+  // Add per-scene numbered text entries
+  for (var i = 0; i < texts.length; i++) {
+    var n = String(i + 1);
+    textMap[n + "_headline"]        = texts[i].white;
+    textMap[n + "_headline_accent"] = texts[i].accent;
+    textMap["screenshot_" + n + "_label"] = texts[i].white + " " + texts[i].accent;
+  }
+
+  // ── Build screenshot map ───────────────────────────────────────
+  // Maps [SWAP_SCREENSHOT_1] → absolute path to PNG
+  var screenshotMap = {};
+  for (var i = 0; i < screenshots.length; i++) {
+    var ssPath = screenshots[i].file || screenshots[i].png || "";
+    // Resolve relative paths against project folder
+    if (ssPath.indexOf("/") !== 0 && ssPath.indexOf("\\") !== 0) {
+      ssPath = projectFolder.fsName + "/" + ssPath;
+    }
+    screenshotMap[String(i + 1)] = ssPath;
+  }
+
+  // ── Walk all comps and layers ──────────────────────────────────
+  var swapCount = 0;
+
+  for (var c = 1; c <= app.project.numItems; c++) {
+    var item = app.project.item(c);
+    if (!(item instanceof CompItem)) continue;
+
+    for (var l = 1; l <= item.numLayers; l++) {
+      var layer = item.layer(l);
+      var name = layer.name;
+
+      // Skip layers without [SWAP_ tag
+      if (name.indexOf("[SWAP_") === -1) continue;
+
+      // Extract the tag: [SWAP_TYPE_identifier]
+      var match = name.match(/\[SWAP_(\w+?)_(\w+)\]/);
+      if (!match) continue;
+
+      var swapType = match[1];    // COLOR, TEXT, SCREENSHOT, IMAGE
+      var swapId   = match[2];    // primary, headline, 1, etc.
+
+      // Also extract full identifier after type (for multi-word ids like headline_accent)
+      var fullMatch = name.match(/\[SWAP_\w+?_([\w_]+)\]/);
+      var fullId = fullMatch ? fullMatch[1] : swapId;
+
+      // ── COLOR SWAP ─────────────────────────────────────────
+      if (swapType === "COLOR") {
+        var hex = colorMap[fullId];
+        if (hex) {
+          var rgb = hexToRgb(hex);
+          // Look for Color Control effect
+          var colorCtrl = findEffect(layer, "Color Control");
+          if (colorCtrl) {
+            colorCtrl.property("Color").setValue(rgb);
+            swapCount++;
+          } else {
+            // No Color Control — try to set the layer's solid color
+            // (works if it's a solid layer)
+            try {
+              if (layer.source instanceof FootageItem && layer.source.mainSource instanceof SolidSource) {
+                layer.source.mainSource.color = rgb;
+                swapCount++;
+              }
+            } catch (e) {}
+          }
+        }
+      }
+
+      // ── TEXT SWAP ──────────────────────────────────────────
+      if (swapType === "TEXT") {
+        var newText = textMap[fullId];
+        if (newText && layer.property("Source Text")) {
+          var textDoc = layer.property("Source Text").value;
+          textDoc.text = newText;
+
+          // If this is an accent text, set the fill color to brand accent
+          if (fullId.indexOf("accent") !== -1 && colorMap["accent"]) {
+            var accentRgb = hexToRgb(colorMap["accent"]);
+            textDoc.fillColor = accentRgb;
+          }
+
+          layer.property("Source Text").setValue(textDoc);
+          swapCount++;
+        }
+      }
+
+      // ── SCREENSHOT SWAP ────────────────────────────────────
+      if (swapType === "SCREENSHOT") {
+        var ssFile = screenshotMap[fullId];
+        if (ssFile) {
+          var newFile = new File(ssFile);
+          if (newFile.exists) {
+            try {
+              layer.source.replace(newFile);
+              swapCount++;
+            } catch (e) {
+              // Layer might not have replaceable source
+            }
+          }
+        }
+      }
+
+      // ── IMAGE SWAP (app icon, logo, etc.) ──────────────────
+      if (swapType === "IMAGE") {
+        var imgPath = null;
+        if (fullId === "app_icon" && brand.icon) imgPath = brand.icon;
+        if (fullId === "store_badge") imgPath = null; // keep default
+        if (fullId.indexOf("logo") !== -1 && brand.logo) imgPath = brand.logo;
+
+        if (imgPath) {
+          var imgFile = new File(imgPath);
+          if (imgFile.exists) {
+            try {
+              layer.source.replace(imgFile);
+              swapCount++;
+            } catch (e) {}
+          }
+        }
+      }
+    }
+  }
+
+  // ── Done ───────────────────────────────────────────────────────
+  if (swapCount > 0) {
+    app.project.save();
+  }
+
+  // Write a status file so the Node pipeline knows we're done
+  var statusFile = new File(projectFolder.fsName + "/swap_complete.json");
+  statusFile.open("w");
+  statusFile.write(JSON.stringify({
+    success: true,
+    swapsApplied: swapCount,
+    timestamp: new Date().toString()
+  }));
+  statusFile.close();
+
+
+  // ── Helpers ────────────────────────────────────────────────────
+
+  /**
+   * Convert hex color to AE [r, g, b] array (0-1 range).
+   */
+  function hexToRgb(hex) {
+    hex = hex.replace("#", "");
+    var r = parseInt(hex.substring(0, 2), 16) / 255;
+    var g = parseInt(hex.substring(2, 4), 16) / 255;
+    var b = parseInt(hex.substring(4, 6), 16) / 255;
+    return [r, g, b];
+  }
+
+  /**
+   * Find an effect by match name or display name on a layer.
+   */
+  function findEffect(layer, effectName) {
+    if (!layer.property("Effects")) return null;
+    var effects = layer.property("Effects");
+    for (var i = 1; i <= effects.numProperties; i++) {
+      var eff = effects.property(i);
+      if (eff.name === effectName || eff.matchName === "ADBE Color Control") {
+        return eff;
+      }
+    }
+    return null;
+  }
+
+})();

package/templates/screencraft.config.example.js

@@ -0,0 +1,165 @@
+/**
+ * screencraft.config.js
+ * ---------------------
+ * Place this file in your project root.
+ * All fields are optional except `screenshots[].route`.
+ * Everything else is auto-detected from your codebase.
+ *
+ * Run `npx screencraft init` to generate this file automatically
+ * with detected values pre-filled.
+ */
+
+module.exports = {
+
+  // ─────────────────────────────────────────────────────────────
+  // APP INFO
+  // Auto-detected from: Info.plist, app.json, pubspec.yaml,
+  // AndroidManifest.xml, package.json
+  // Override here if detection is wrong or you want different copy.
+  // ─────────────────────────────────────────────────────────────
+  app: {
+    name: "Navi",                          // App display name
+    tagline: "Navigate anything.",         // One-line tagline (used in video title card)
+    cta: "Download Free",                  // CTA button text in video
+    category: "productivity",             // App Store category (used for icon style selection)
+    platforms: ["ios", "android"],         // Which store badges to include in video
+    storeUrl: {
+      ios:     "apps.apple.com/app/navi/id123456789",
+      android: "play.google.com/store/apps/details?id=com.navi.app"
+    }
+  },
+
+  // ─────────────────────────────────────────────────────────────
+  // SCREENSHOTS
+  // The only required section. Define up to 6 screens.
+  // `route` is the deep link / navigation path to reach each screen.
+  // `label` is the short callout text that appears beside the screen
+  // in the video. Max 5 words. Auto-generated by AI if omitted.
+  // `state` lets you set up specific UI state before screenshotting.
+  // ─────────────────────────────────────────────────────────────
+  screenshots: [
+    {
+      route: "/onboarding",
+      label: "Get started in seconds",
+      state: null                          // No special state needed
+    },
+    {
+      route: "/home",
+      label: "Everything at a glance",
+      state: {
+        user: "demo",                      // Log in as demo user so home screen is populated
+        mock: "home_populated"             // Use mock data preset (see Mocks section below)
+      }
+    },
+    {
+      route: "/search",
+      label: "Find anything instantly",
+      state: {
+        mock: "search_results"
+      }
+    },
+    {
+      route: "/profile",
+      label: "Your space, your way",
+      state: {
+        user: "demo"
+      }
+    },
+    {
+      route: "/settings",
+      label: "Built for how you work",
+      state: null
+    },
+    {
+      route: "/home",
+      label: "Easy on the eyes",
+      state: {
+        theme: "dark",                     // Force dark mode for this screenshot
+        mock: "home_populated"
+      }
+    }
+  ],
+
+  // ─────────────────────────────────────────────────────────────
+  // BRAND
+  // Auto-detected from: theme.js, colors.js, colors.swift,
+  // Color.xcassets, theme.dart, styles/colors.css, tokens.json
+  // Override here if you want to use different colors in the
+  // marketing materials vs the app itself.
+  // ─────────────────────────────────────────────────────────────
+  brand: {
+    primary:   null,   // e.g. "#1B3A6B" — null = auto-detect
+    secondary: null,   // e.g. "#F5F7FA" — null = auto-detect
+    accent:    null,   // e.g. "#C9A84C" — null = auto-detect
+    font:      null,   // e.g. "Inter"   — null = auto-detect, falls back to system
+    icon:      null,   // Path to app icon PNG (1024x1024). null = auto-detect
+                       // Searched: ios/AppIcon.appiconset, assets/icon.png,
+                       //           android/app/src/main/res/mipmap-xxxhdpi
+  },
+
+  // ─────────────────────────────────────────────────────────────
+  // DEVICE
+  // Which device frame to use for screenshots and video.
+  // Auto-selected based on platform if not specified.
+  // ─────────────────────────────────────────────────────────────
+  device: {
+    model:      "iphone-15-pro",     // iphone-15-pro | iphone-15 | pixel-8 | pixel-8-pro
+    color:      "black-titanium",    // black-titanium | white-titanium | natural | blue
+    showNotch:  true,                // Show status bar / dynamic island area
+  },
+
+  // ─────────────────────────────────────────────────────────────
+  // VIDEO
+  // Controls the generated preview video.
+  // ─────────────────────────────────────────────────────────────
+  video: {
+    duration:   30,          // 30 or 45 seconds
+    music:      "upbeat",    // upbeat | calm | cinematic | none
+    showRating: false,       // Include App Store rating scene (requires rating + reviewCount)
+    rating:     null,        // e.g. "4.8" — shown as star rating in social proof scene
+    reviewCount: null,       // e.g. "12,400+" — shown beneath stars
+    reviewQuote: null,       // Short user review quote, max 10 words
+  },
+
+  // ─────────────────────────────────────────────────────────────
+  // OUTPUT
+  // Controls what gets generated and where.
+  // ─────────────────────────────────────────────────────────────
+  output: {
+    dir:          "./launch-kit",   // Output directory (relative to project root)
+    screenshots:  true,             // Always true — free tier
+    video:        true,             // Watermarked always; clean requires license
+    aepFile:      true,             // Requires Launch ($49) or Pro ($99) license
+    psds:         true,             // Requires Pro ($99) license
+    socialCut:    true,             // Square 1:1 MP4 — requires Pro ($99) license
+    storeCopy:    true,             // App Store description + keywords — requires Pro
+  },
+
+  // ─────────────────────────────────────────────────────────────
+  // MOCKS  (optional)
+  // Define named data states the simulator can be put into
+  // before a screenshot. Reference these in screenshots[].state.mock
+  // ScreenCraft will look for a matching setup function in:
+  //   screencraft.mocks.js  (you create this — see docs)
+  // ─────────────────────────────────────────────────────────────
+  mocks: {
+    enabled: false,   // Set to true if you have screencraft.mocks.js
+  },
+
+  // ─────────────────────────────────────────────────────────────
+  // SIMULATOR  (rarely needed — auto-configured per framework)
+  // ─────────────────────────────────────────────────────────────
+  simulator: {
+    ios: {
+      device:   "iPhone 15 Pro",     // Simulator device name
+      os:       "17.0",              // iOS version
+      timeout:  8000,                // ms to wait after navigation before screenshot
+    },
+    android: {
+      device:   "Pixel 8 Pro",
+      api:      34,
+      timeout:  8000,
+    }
+  }
+
+};

package/test/output/style_profile.json

@@ -0,0 +1,64 @@
+{
+  "layout": {
+    "type": "multi-phone",
+    "phoneCount": 3,
+    "arrangement": "stacked-cascade",
+    "tiltAngles": [-14, -7, 0],
+    "phoneScales": [0.65, 0.8, 1.0],
+    "phonePositions": [
+      { "anchor": "left",   "xOffset": -28, "yOffset": 8  },
+      { "anchor": "center", "xOffset": -10, "yOffset": 4  },
+      { "anchor": "right",  "xOffset": 12,  "yOffset": 0  }
+    ],
+    "textPosition": "top-left"
+  },
+
+  "background": {
+    "type": "solid",
+    "color": "#5C3317",
+    "gradientEndColor": null,
+    "gradientAngle": null,
+    "noiseAmount": 0.08,
+    "adaptToBrand": true
+  },
+
+  "phoneFrame": {
+    "style": "white-minimal",
+    "borderColor": null,
+    "borderWidth": 0,
+    "shadowStyle": "soft",
+    "shadowColor": "#00000055",
+    "cornerRadius": 44,
+    "adaptBorderToBrand": false
+  },
+
+  "typography": {
+    "headlineStyle": "large-bold-sans",
+    "headlineSize": "xxl",
+    "headlineCase": "title",
+    "headlinePosition": "top-left",
+    "subheadPresent": true,
+    "subheadSize": "sm",
+    "usesEmoji": false,
+    "textColor": "#FFFFFF",
+    "accentTextColor": null,
+    "lineStyle": "tight",
+    "fontPersonality": "bold-sans"
+  },
+
+  "spacing": {
+    "density": "airy",
+    "phonePaddingPercent": 6,
+    "textToPhoneGap": "generous"
+  },
+
+  "colorExtraction": {
+    "dominantBgColor": "#5C3317",
+    "phoneFrameColor": "#FFFFFF",
+    "headlineTextColor": "#FFFFFF",
+    "accentColor": null,
+    "overallMood": "warm"
+  },
+
+  "layoutDescription": "Three white-framed phones in a stacked left-to-right cascade at increasing scale, small-to-large, with bold left-aligned headline text occupying the upper-left quadrant above the phone stack."
+}

package/test/test_brand.js

@@ -0,0 +1,69 @@
+/**
+ * test/test_brand.js
+ * ------------------
+ * Tests brand detection against a real project directory.
+ * 
+ * Run: node test/test_brand.js /path/to/your/app
+ *   or: node test/test_brand.js  (uses current directory)
+ */
+
+const path = require('path');
+const { detectBrand, detectFramework } = require('../src/detectors/detectBrand');
+
+const targetDir = process.argv[2] || process.cwd();
+
+async function main() {
+  console.log('');
+  console.log('  Testing brand detection on:', targetDir);
+  console.log('');
+
+  const framework = await detectFramework(targetDir);
+  console.log('  Framework:', framework.name);
+  console.log('  Platform:', framework.platform.join(', ') || 'none detected');
+  console.log('  Config file:', framework.configFile || 'none');
+  console.log('');
+
+  const brand = await detectBrand(targetDir, {});
+  console.log('  Brand results:');
+  console.log('  ├─ App name:  ', brand.appName   || '(not detected)');
+  console.log('  ├─ Primary:   ', brand.primary);
+  console.log('  ├─ Secondary: ', brand.secondary);
+  console.log('  ├─ Accent:    ', brand.accent);
+  console.log('  ├─ Background:', brand.background);
+  console.log('  ├─ Icon:      ', brand.icon       || '(not detected)');
+  console.log('  ├─ Font:      ', brand.font?.family ? `${brand.font.family}${brand.font.weight ? ` (${brand.font.weight})` : ''}` : '(not detected)');
+  console.log('  │  File:      ', brand.font?.file  || '(none)');
+  console.log('  └─ Logo:      ', brand.logo        || '(not detected)');
+  console.log('');
+
+  // Visual color swatches in terminal (if supported)
+  const swatches = [
+    ['Primary',   brand.primary],
+    ['Secondary', brand.secondary],
+    ['Accent',    brand.accent],
+  ];
+
+  console.log('  Color swatches:');
+  for (const [name, hex] of swatches) {
+    const { r, g, b } = hexToRgb(hex);
+    // ANSI background color block
+    const swatch = `\x1b[48;2;${r};${g};${b}m   \x1b[0m`;
+    console.log(`  ${swatch} ${name.padEnd(10)} ${hex}`);
+  }
+
+  console.log('');
+}
+
+function hexToRgb(hex) {
+  const h = hex.replace('#', '');
+  return {
+    r: parseInt(h.substring(0, 2), 16),
+    g: parseInt(h.substring(2, 4), 16),
+    b: parseInt(h.substring(4, 6), 16),
+  };
+}
+
+main().catch(err => {
+  console.error('  ✗ Error:', err.message);
+  process.exit(1);
+});