screencraft 0.1.0

package/src/generators/compositePSD.js

@@ -0,0 +1,682 @@
+/**
+ * src/generators/compositePSD.js
+ * ------------------------------
+ * Template-based compositor.
+ *
+ * Reads a designer-made PSD template, finds layers tagged with
+ * [SWAP_*] naming conventions, replaces their content with the
+ * user's brand data + screenshots, and exports:
+ *
+ *   1. A flat PNG  — App Store-ready
+ *   2. A layered PSD — editable, for Pro tier users
+ *
+ * Swap tags recognised:
+ *   [SWAP_SCREENSHOT_N]       — replace pixel data with app screenshot
+ *   [SWAP_TEXT_headline]      — replace text content (white headline)
+ *   [SWAP_TEXT_headline_accent] — replace text content (accent headline)
+ *   [SWAP_COLOR_background]   — recolor solid to brand.background
+ *   [SWAP_COLOR_primary]      — recolor solid to brand.primary
+ *   [SWAP_COLOR_secondary]    — recolor solid to brand.secondary
+ *   [SWAP_COLOR_accent]       — recolor solid to brand.accent
+ *
+ * Falls back to programmatic compositing if no PSD template is found.
+ *
+ * Dependencies: sharp (image processing), ag-psd (PSD read/write)
+ */
+
+const path  = require('path');
+const fs    = require('fs');
+const sharp = require('sharp');
+
+// ag-psd for PSD read/write — requires canvas for pixel data
+let agPsd;
+let createCanvas;
+try {
+  agPsd = require('ag-psd');
+  createCanvas = require('canvas').createCanvas;
+  agPsd.initializeCanvas(createCanvas);
+} catch {
+  // ag-psd or canvas not available — fallback compositing still works
+}
+
+const TEMPLATES_DIR = path.join(__dirname, '../../templates/layouts');
+
+// ─────────────────────────────────────────────────────────────────
+// MAIN EXPORT
+// ─────────────────────────────────────────────────────────────────
+
+/**
+ * compositePSD(opts)
+ *
+ * @param {Object} opts
+ * @param {string} opts.templateName   — layout name (e.g. 'minimal'), or null for auto
+ * @param {string} opts.screenshotPath — path to raw screenshot PNG
+ * @param {string} opts.headlineWhite  — white headline text
+ * @param {string} opts.headlineAccent — accent-colored headline text
+ * @param {Object} opts.brand          — full brand object from detectBrand
+ * @param {Object} opts.font           — { family, file, weight } from brand detection
+ * @param {string} opts.outputPng      — path to write final flat PNG
+ * @param {string} opts.outputPsd      — path to write layered PSD (if writePsd)
+ * @param {boolean} opts.writePsd      — write PSD file (Pro tier)
+ */
+async function compositePSD(opts) {
+  const {
+    templateName = null,
+    screenshotPath,
+    headlineWhite,
+    headlineAccent,
+    brand         = {},
+    font          = {},
+    outputPng,
+    outputPsd,
+    writePsd      = false,
+  } = opts;
+
+  // Resolve which template PSD to use
+  const templatePath = resolveTemplate(templateName);
+
+  if (templatePath && agPsd) {
+    // ── Template mode: read PSD, swap layers, export ──────────
+    await compositeFromTemplate({
+      templatePath,
+      screenshotPath,
+      headlineWhite,
+      headlineAccent,
+      brand,
+      font,
+      outputPng,
+      outputPsd,
+      writePsd,
+    });
+  } else {
+    // ── Fallback mode: programmatic compositing ───────────────
+    await compositeFromScratch({
+      screenshotPath,
+      headlineWhite,
+      headlineAccent,
+      brand,
+      font,
+      outputPng,
+      outputPsd,
+      writePsd,
+    });
+  }
+}
+
+module.exports = { compositePSD };
+
+
+// ─────────────────────────────────────────────────────────────────
+// TEMPLATE-BASED COMPOSITING
+// ─────────────────────────────────────────────────────────────────
+
+/**
+ * Find the template PSD file. Checks:
+ *   1. templates/layouts/{name}/template.psd
+ *   2. templates/layouts/{name}.psd
+ *   3. First .psd found in templates/layouts/
+ */
+function resolveTemplate(name) {
+  // Accept absolute paths directly
+  if (name && path.isAbsolute(name) && fs.existsSync(name)) return name;
+
+  if (!fs.existsSync(TEMPLATES_DIR)) return null;
+
+  if (name) {
+    const dirPath  = path.join(TEMPLATES_DIR, name, 'template.psd');
+    const flatPath = path.join(TEMPLATES_DIR, name + '.psd');
+    if (fs.existsSync(dirPath))  return dirPath;
+    if (fs.existsSync(flatPath)) return flatPath;
+  }
+
+  // Auto: pick the first template available
+  try {
+    for (const entry of fs.readdirSync(TEMPLATES_DIR, { withFileTypes: true })) {
+      if (entry.isDirectory()) {
+        const p = path.join(TEMPLATES_DIR, entry.name, 'template.psd');
+        if (fs.existsSync(p)) return p;
+      } else if (entry.name.endsWith('.psd')) {
+        return path.join(TEMPLATES_DIR, entry.name);
+      }
+    }
+  } catch {}
+
+  return null;
+}
+
+/**
+ * Read a designer-made PSD, swap [SWAP_*] layers, export PNG + PSD.
+ */
+async function compositeFromTemplate(opts) {
+  const {
+    templatePath,
+    screenshotPath,
+    headlineWhite,
+    headlineAccent,
+    brand,
+    font,
+    outputPng,
+    outputPsd,
+    writePsd,
+  } = opts;
+
+  // Read the template PSD with full layer image data
+  const buffer = fs.readFileSync(templatePath);
+  const psd = agPsd.readPsd(buffer, {
+    skipCompositeImageData: true,
+    skipLayerImageData:     false,
+  });
+
+  // Build the color map from brand
+  const colorMap = {
+    background: brand.background || brand.primary || '#1B2A4A',
+    primary:    brand.primary    || '#1B2A4A',
+    secondary:  brand.secondary  || '#435B98',
+    accent:     brand.accent     || '#9B7FD4',
+  };
+
+  // Load and resize the screenshot to match the template's screenshot slot
+  const screenshotSlot = findLayer(psd.children, /\[SWAP_SCREENSHOT/);
+
+  let screenshotPixels = null;
+  if (screenshotSlot) {
+    const slotW = screenshotSlot.right  - screenshotSlot.left;
+    const slotH = screenshotSlot.bottom - screenshotSlot.top;
+
+    screenshotPixels = await sharp(screenshotPath)
+      .resize(slotW, slotH, { fit: 'cover', position: 'top' })
+      .ensureAlpha()
+      .raw()
+      .toBuffer({ resolveWithObject: true });
+  }
+
+  // Walk all layers and perform swaps
+  swapLayers(psd.children, {
+    colorMap,
+    headlineWhite,
+    headlineAccent,
+    screenshotPixels,
+    font,
+    canvasW: psd.width,
+    canvasH: psd.height,
+  });
+
+  // ── Export flat PNG via sharp ──────────────────────────────────
+  // Flatten the PSD layers ourselves using sharp compositing.
+  // We walk the layers bottom-to-top and composite each one.
+  const pngBuffer = await flattenLayersToSharp(psd);
+  fs.writeFileSync(outputPng, pngBuffer);
+
+  // ── Export layered PSD ────────────────────────────────────────
+  const psdBuffer = agPsd.writePsd(psd);
+
+  // ── Export layered PSD (Pro tier) ─────────────────────────────
+  if (writePsd) {
+    fs.writeFileSync(outputPsd, Buffer.from(psdBuffer));
+  }
+}
+
+/**
+ * Recursively find a layer whose name matches a regex.
+ */
+function findLayer(children, regex) {
+  if (!children) return null;
+  for (const layer of children) {
+    if (regex.test(layer.name)) return layer;
+    if (layer.children) {
+      const found = findLayer(layer.children, regex);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+/**
+ * Walk layer tree and swap content based on [SWAP_*] naming.
+ */
+function swapLayers(children, ctx) {
+  if (!children) return;
+
+  for (const layer of children) {
+    const name = layer.name || '';
+
+    // ── Color swap: recolor solid layers ───────────────────────
+    const colorMatch = name.match(/\[SWAP_COLOR_(\w+)\]/);
+    if (colorMatch) {
+      const colorKey = colorMatch[1]; // background, primary, secondary, accent
+      const hex = ctx.colorMap[colorKey];
+      if (hex) {
+        recolorLayer(layer, hex);
+      }
+    }
+
+    // ── Screenshot swap: replace pixel data ────────────────────
+    if (name.match(/\[SWAP_SCREENSHOT/) && ctx.screenshotPixels) {
+      const ss = ctx.screenshotPixels;
+      const w = ss.info.width;
+      const h = ss.info.height;
+
+      // Create a real Canvas object that ag-psd can write
+      const canvas = createCanvas(w, h);
+      const imgCtx = canvas.getContext('2d');
+      const imgData = imgCtx.createImageData(w, h);
+      imgData.data.set(new Uint8ClampedArray(ss.data));
+      imgCtx.putImageData(imgData, 0, 0);
+
+      layer.canvas = canvas;
+      layer.right  = layer.left + w;
+      layer.bottom = layer.top  + h;
+    }
+
+    // ── Text swap: replace text content + re-render canvas ─────
+    const textMatch = name.match(/\[SWAP_TEXT_(\w+)\]/);
+    if (textMatch && layer.text) {
+      const tag = textMatch[1]; // 'headline' or 'headline_accent'
+      let newText = null;
+
+      if (tag === 'headline')        newText = (ctx.headlineWhite  || '').trim();
+      if (tag === 'headline_accent') newText = (ctx.headlineAccent || '').trim();
+
+      if (newText !== null) {
+        // For accent text layers, override the fill color with brand accent
+        const colorOverride = tag.includes('accent') ? ctx.colorMap.accent : null;
+        rerenderTextLayer(layer, newText, ctx.canvasW, ctx.canvasH, colorOverride);
+      }
+    }
+
+    // Recurse into groups
+    if (layer.children) {
+      swapLayers(layer.children, ctx);
+    }
+  }
+}
+
+/**
+ * Re-render a text layer's canvas with new text.
+ * Reads font, size, color, and alignment from the PSD layer metadata,
+ * then draws the text using the canvas npm module.
+ */
+function rerenderTextLayer(layer, newText, psdW, psdH, colorOverrideHex) {
+  const style = layer.text.style || {};
+  const paraStyle = layer.text.paragraphStyle || {};
+
+  // Extract font info from PSD metadata
+  const fontName = style.font?.name || 'Arial';
+  const fontSize = style.fontSize || 72;
+  const tracking = style.tracking || 0; // per-mille tracking
+
+  // Determine text color
+  let fillColor;
+  if (colorOverrideHex) {
+    // Brand color override (e.g. accent text uses brand.accent)
+    fillColor = hexToRgb(colorOverrideHex);
+  } else {
+    // Use PSD's own color — check styleRuns for the actual text color
+    fillColor = style.fillColor || { r: 255, g: 255, b: 255 };
+    if (layer.text.styleRuns && layer.text.styleRuns.length > 0) {
+      const lastRun = layer.text.styleRuns[layer.text.styleRuns.length - 1];
+      if (lastRun.style?.fillColor) {
+        fillColor = lastRun.style.fillColor;
+      }
+    }
+  }
+
+  const colorStr = `rgb(${Math.round(fillColor.r)}, ${Math.round(fillColor.g)}, ${Math.round(fillColor.b)})`;
+
+  // Map PSD font name to canvas-compatible font string
+  // ProximaNova-Bold → "bold ProximaNova" with fallback
+  const fontWeight = fontName.toLowerCase().includes('bold') ? 'bold' : 'normal';
+  const familyName = fontName.replace(/-Bold|-Regular|-Light|-Medium|-SemiBold|-ExtraBold/gi, '').replace(/-/g, ' ');
+  const fontStr = `${fontWeight} ${fontSize}px "${familyName}", "Helvetica Neue", Arial, sans-serif`;
+
+  // Measure text to determine canvas size
+  const measureCanvas = createCanvas(1, 1);
+  const measureCtx = measureCanvas.getContext('2d');
+  measureCtx.font = fontStr;
+  const metrics = measureCtx.measureText(newText);
+
+  // Apply tracking (PSD tracking is in 1/1000 em)
+  const trackingPx = (tracking / 1000) * fontSize;
+  const totalTracking = trackingPx * Math.max(0, newText.length - 1);
+  const textWidth = Math.ceil(metrics.width + totalTracking);
+
+  // Canvas dimensions: full PSD width so text can be centered
+  const canvasW = psdW;
+  const canvasH = Math.ceil(fontSize * 1.4); // enough for ascenders/descenders
+
+  const canvas = createCanvas(canvasW, canvasH);
+  const ctx = canvas.getContext('2d');
+  ctx.font = fontStr;
+  ctx.fillStyle = colorStr;
+  ctx.textBaseline = 'top';
+
+  // Alignment
+  const isCenter = (paraStyle.justification === 'center');
+  let startX;
+  if (isCenter) {
+    ctx.textAlign = 'center';
+    startX = canvasW / 2;
+  } else {
+    ctx.textAlign = 'left';
+    startX = 0;
+  }
+
+  // Draw with tracking (letter-spacing)
+  if (Math.abs(trackingPx) > 0.5) {
+    // Manual character-by-character drawing for tracking
+    ctx.textAlign = 'left'; // override for manual positioning
+    const chars = newText.split('');
+    let x;
+    if (isCenter) {
+      x = (canvasW - textWidth) / 2;
+    } else {
+      x = 0;
+    }
+    const yOffset = fontSize * 0.15; // small top padding
+    for (const ch of chars) {
+      ctx.fillText(ch, x, yOffset);
+      const charW = measureCtx.measureText(ch).width;
+      x += charW + trackingPx;
+    }
+  } else {
+    const yOffset = fontSize * 0.15;
+    ctx.fillText(newText, startX, yOffset);
+  }
+
+  // Update the layer
+  layer.text.text = newText;
+
+  // Update style runs to match new text length
+  if (layer.text.styleRuns) {
+    layer.text.styleRuns = [{
+      length: newText.length,
+      style: { fillColor },
+    }];
+  }
+
+  // Replace the rasterized canvas
+  layer.canvas = canvas;
+
+  // Update bounds — center horizontally at the original vertical position
+  const origCenterX = Math.round((layer.left + layer.right) / 2);
+  const origTop = layer.top;
+  layer.left   = 0; // full width canvas
+  layer.right  = canvasW;
+  layer.top    = origTop;
+  layer.bottom = origTop + canvasH;
+}
+
+/**
+ * Recolor a solid/shape layer to a new hex color.
+ * Replaces every opaque pixel with the new color, preserving alpha.
+ * Works with real Canvas objects (from ag-psd + canvas npm module).
+ */
+function recolorLayer(layer, hex) {
+  const { r, g, b } = hexToRgb(hex);
+
+  if (!layer.canvas) return;
+
+  const w = layer.canvas.width;
+  const h = layer.canvas.height;
+
+  // ag-psd returns real Canvas objects — use getContext to access pixels
+  if (typeof layer.canvas.getContext === 'function') {
+    const ctx = layer.canvas.getContext('2d');
+    const imgData = ctx.getImageData(0, 0, w, h);
+    const data = imgData.data;
+    for (let i = 0; i < data.length; i += 4) {
+      if (data[i + 3] > 0) {
+        data[i + 0] = r;
+        data[i + 1] = g;
+        data[i + 2] = b;
+      }
+    }
+    ctx.putImageData(imgData, 0, 0);
+  } else if (layer.canvas.data) {
+    // Fallback: raw data object
+    const data = layer.canvas.data;
+    for (let i = 0; i < data.length; i += 4) {
+      if (data[i + 3] > 0) {
+        data[i + 0] = r;
+        data[i + 1] = g;
+        data[i + 2] = b;
+      }
+    }
+  }
+}
+
+
+/**
+ * Flatten PSD layers to a PNG buffer using sharp.
+ * Walks layers bottom-to-top, composites each visible layer at its position.
+ */
+async function flattenLayersToSharp(psd) {
+  const w = psd.width;
+  const h = psd.height;
+
+  // Start with a transparent canvas
+  let base = sharp({
+    create: { width: w, height: h, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 0 } }
+  }).png().toBuffer();
+
+  base = await base;
+
+  // Collect all layers (flat list, bottom to top)
+  const layers = collectVisibleLayers(psd.children || []);
+
+  // Composite each layer
+  const compositeInputs = [];
+  for (const layer of layers) {
+    if (!layer.canvas) continue;
+
+    const lw = layer.canvas.width;
+    const lh = layer.canvas.height;
+    if (lw <= 0 || lh <= 0) continue;
+
+    // Extract raw RGBA pixels from the canvas
+    let rawPixels;
+    if (typeof layer.canvas.getContext === 'function') {
+      const ctx = layer.canvas.getContext('2d');
+      const imgData = ctx.getImageData(0, 0, lw, lh);
+      rawPixels = Buffer.from(imgData.data.buffer);
+    } else if (layer.canvas.data) {
+      rawPixels = Buffer.from(layer.canvas.data.buffer);
+    } else {
+      continue;
+    }
+
+    // Convert raw pixels to PNG buffer for sharp compositing
+    const layerPng = await sharp(rawPixels, {
+      raw: { width: lw, height: lh, channels: 4 }
+    }).png().toBuffer();
+
+    compositeInputs.push({
+      input: layerPng,
+      top:  Math.max(0, layer.top  || 0),
+      left: Math.max(0, layer.left || 0),
+    });
+  }
+
+  if (compositeInputs.length === 0) {
+    return base;
+  }
+
+  return sharp(base).composite(compositeInputs).png().toBuffer();
+}
+
+/**
+ * Collect visible layers in bottom-to-top order (PSD layer order).
+ */
+function collectVisibleLayers(children) {
+  const result = [];
+  for (const layer of children) {
+    if (layer.hidden) continue;
+    if (layer.children) {
+      result.push(...collectVisibleLayers(layer.children));
+    } else {
+      result.push(layer);
+    }
+  }
+  return result;
+}
+
+
+// ─────────────────────────────────────────────────────────────────
+// FALLBACK: PROGRAMMATIC COMPOSITING (no template PSD)
+// ─────────────────────────────────────────────────────────────────
+
+// Fallback constants
+const CANVAS_W = 1290;
+const CANVAS_H = 2796;
+const TEXT_TOP        = 120;
+const HEADLINE_SIZE   = 88;
+const LINE_GAP        = 12;
+const SECTION_GAP     = 24;
+const CHARS_PER_LINE  = 18;
+const PHONE_TOP       = 820;
+const PHONE_LEFT      = 80;
+const PHONE_W         = 1130;
+const PHONE_H         = 1900;
+const SCREEN_OFFSET_X = 50;
+const SCREEN_OFFSET_Y = 80;
+const SCREEN_W        = 1030;
+const SCREEN_H        = 1740;
+
+async function compositeFromScratch(opts) {
+  const {
+    screenshotPath,
+    headlineWhite,
+    headlineAccent,
+    brand         = {},
+    font          = {},
+    outputPng,
+  } = opts;
+
+  const bgColor     = brand.primary || '#1B2A4A';
+  const accentColor = brand.accent  || '#9B7FD4';
+
+  // 1. Background
+  const { r, g, b } = hexToRgb(bgColor);
+  const background = await sharp({
+    create: { width: CANVAS_W, height: CANVAS_H, channels: 3, background: { r, g, b } }
+  }).png().toBuffer();
+
+  // 2. Resize screenshot
+  const screenshotLayer = await sharp(screenshotPath)
+    .resize(SCREEN_W, SCREEN_H, { fit: 'cover', position: 'top' })
+    .png()
+    .toBuffer();
+
+  const screenLeft = PHONE_LEFT + SCREEN_OFFSET_X;
+  const screenTop  = PHONE_TOP  + SCREEN_OFFSET_Y;
+
+  let composite = [
+    { input: screenshotLayer, top: screenTop, left: screenLeft },
+  ];
+
+  // 3. Phone frame placeholder
+  const placeholderFrame = await buildPlaceholderFrame(accentColor);
+  composite.push({ input: placeholderFrame, top: PHONE_TOP, left: PHONE_LEFT });
+
+  // 4. Headline text
+  const textSvg = buildHeadlineSvg({
+    white: headlineWhite,
+    accent: headlineAccent,
+    accentColor,
+    canvasW: CANVAS_W,
+    canvasH: CANVAS_H,
+    textTop: TEXT_TOP,
+    fontSize: HEADLINE_SIZE,
+    brandFont: font,
+  });
+  composite.push({ input: Buffer.from(textSvg), top: 0, left: 0 });
+
+  // 5. Write PNG
+  await sharp(background).composite(composite).png().toFile(outputPng);
+}
+
+async function buildPlaceholderFrame(borderColor) {
+  const { r, g, b } = hexToRgb(borderColor);
+  const rx = 60;
+  const svg = `
+    <svg width="${PHONE_W}" height="${PHONE_H}" xmlns="http://www.w3.org/2000/svg">
+      <rect x="4" y="4" width="${PHONE_W - 8}" height="${PHONE_H - 8}"
+        rx="${rx}" ry="${rx}" fill="none"
+        stroke="rgb(${r},${g},${b})" stroke-width="8" opacity="0.8" />
+      <rect x="${PHONE_W / 2 - 60}" y="20" width="120" height="34"
+        rx="17" ry="17" fill="rgb(${r},${g},${b})" opacity="0.6" />
+    </svg>`;
+  return Buffer.from(svg);
+}
+
+function buildHeadlineSvg({ white, accent, accentColor, canvasW, canvasH, textTop, fontSize, brandFont }) {
+  const cx = canvasW / 2;
+  const fontFamily = brandFont?.family
+    ? `'${brandFont.family}', system-ui, -apple-system, sans-serif`
+    : 'system-ui, -apple-system, BlinkMacSystemFont, sans-serif';
+  const fontWeight = '800';
+  const whiteLines  = wrapText(white,  CHARS_PER_LINE);
+  const accentLines = wrapText(accent, CHARS_PER_LINE);
+  const lineH = fontSize + LINE_GAP;
+
+  let y = textTop + fontSize;
+  const whiteTspans = whiteLines.map((line, i) => {
+    const ly = y + i * lineH;
+    return `      <tspan x="${cx}" y="${ly}">${escXml(line)}</tspan>`;
+  }).join('\n');
+
+  const accentStartY = y + (whiteLines.length - 1) * lineH + SECTION_GAP + lineH;
+  const accentTspans = accentLines.map((line, i) => {
+    const ly = accentStartY + i * lineH;
+    return `      <tspan x="${cx}" y="${ly}">${escXml(line)}</tspan>`;
+  }).join('\n');
+
+  return `
+    <svg width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg">
+      <text text-anchor="middle" font-family="${fontFamily}"
+        font-weight="${fontWeight}" font-size="${fontSize}" fill="#FFFFFF">
+${whiteTspans}
+      </text>
+      <text text-anchor="middle" font-family="${fontFamily}"
+        font-weight="${fontWeight}" font-size="${fontSize}" fill="${accentColor}">
+${accentTspans}
+      </text>
+    </svg>`;
+}
+
+function wrapText(text, maxChars) {
+  if (!text || text.length <= maxChars) return [text || ''];
+  const words = text.split(/\s+/);
+  const lines = [];
+  let current = '';
+  for (const word of words) {
+    if (current.length === 0) {
+      current = word;
+    } else if ((current + ' ' + word).length <= maxChars) {
+      current += ' ' + word;
+    } else {
+      lines.push(current);
+      current = word;
+    }
+  }
+  if (current.length > 0) lines.push(current);
+  return lines.length > 0 ? lines : [''];
+}
+
+
+// ─────────────────────────────────────────────────────────────────
+// SHARED HELPERS
+// ─────────────────────────────────────────────────────────────────
+
+function hexToRgb(hex) {
+  const h = (hex || '#000000').replace('#', '');
+  return {
+    r: parseInt(h.substring(0, 2), 16) || 0,
+    g: parseInt(h.substring(2, 4), 16) || 0,
+    b: parseInt(h.substring(4, 6), 16) || 0,
+  };
+}
+
+function escXml(str) {
+  return (str || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}