edsger 0.76.0 → 0.78.0

package/dist/phases/app-store-generation/screenshot-composer.d.ts

@@ -1,41 +0,0 @@
-/**
- * Composes professional app store screenshots by combining:
- * 1. AI-generated mock app HTML (rendered via Playwright)
- * 2. Device frame wrapping (reusing existing device-frames.ts)
- * 3. Text overlay (headline + subheadline) on gradient background
- *
- * The final output is a single PNG at exact store-required dimensions.
- */
-export interface ScreenshotSpec {
-    feature_highlight: string;
-    headline: string;
-    subheadline?: string;
-    background_gradient: string;
-    text_color: string;
-    device_frame: string;
-    html_template: string;
-}
-export interface GeneratedScreenshot {
-    device_type: string;
-    display_order: number;
-    local_path: string;
-    width: number;
-    height: number;
-    caption: string;
-    background_gradient: string;
-    device_frame: string;
-}
-/**
- * Generate all store screenshots for a given set of specs and target stores.
- *
- * Pipeline per screenshot:
- * 1. Render AI HTML template at device viewport → raw PNG
- * 2. Wrap raw PNG in device frame → framed PNG
- * 3. Compose framed PNG + text overlay + gradient background at exact store dimensions → final PNG
- */
-export declare function generateStoreScreenshots(specs: ScreenshotSpec[], options: {
-    productId: string;
-    targetStore: 'apple' | 'google' | 'all';
-    locale: string;
-    verbose?: boolean;
-}): Promise<GeneratedScreenshot[]>;

package/dist/phases/app-store-generation/screenshot-composer.js

@@ -1,516 +0,0 @@
-/**
- * Composes professional app store screenshots by combining:
- * 1. AI-generated mock app HTML (rendered via Playwright)
- * 2. Device frame wrapping (reusing existing device-frames.ts)
- * 3. Text overlay (headline + subheadline) on gradient background
- *
- * The final output is a single PNG at exact store-required dimensions.
- */
-import { mkdir } from 'fs/promises';
-import { tmpdir } from 'os';
-import { join } from 'path';
-import { generateDeviceFrameHtml, } from '../../services/video/device-frames.js';
-import { logError, logInfo, logWarning } from '../../utils/logger.js';
-import { ensurePlaywright } from '../../utils/validation.js';
-import { getInterFontStyle } from './inter-font.js';
-import { STORE_SCREENSHOT_SIZES } from './prompts.js';
-/**
- * Compose a single store screenshot for a specific device type
- */
-async function composeStoreScreenshot(opts) {
-    const { browser, framedDataUrl, spec, specIdx, store, deviceType, size, outputDir, results, verbose, } = opts;
-    try {
-        const renderWidth = Math.round(size.width / 2);
-        const renderHeight = Math.round(size.height / 2);
-        const compositionHtml = createCompositionHtml(framedDataUrl, spec, renderWidth, renderHeight);
-        const compContext = await browser.newContext({
-            viewport: { width: renderWidth, height: renderHeight },
-            deviceScaleFactor: 2,
-        });
-        const compPage = await compContext.newPage();
-        await compPage.setContent(compositionHtml, { waitUntil: 'load' });
-        await compPage.waitForTimeout(300);
-        const fileName = `${store}-${deviceType}-${String(specIdx + 1).padStart(2, '0')}.png`;
-        const filePath = join(outputDir, fileName);
-        await compPage.screenshot({ path: filePath, fullPage: false, type: 'png' });
-        await compContext.close();
-        results.push({
-            device_type: `${store}_${deviceType}`,
-            display_order: specIdx + 1,
-            local_path: filePath,
-            width: size.width,
-            height: size.height,
-            caption: spec.headline,
-            background_gradient: spec.background_gradient,
-            device_frame: spec.device_frame,
-        });
-        if (verbose) {
-            logInfo(`  Generated: ${fileName} (${size.width}x${size.height})`);
-        }
-    }
-    catch (error) {
-        logWarning(`Failed to compose ${store}/${deviceType} for "${spec.headline}": ${error instanceof Error ? error.message : String(error)}`);
-    }
-}
-async function loadChromium() {
-    try {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any, no-new-func -- dynamic import to avoid bundler resolution of optional peer dependency
-        const pw = await Function('return import("playwright")')();
-        return pw.chromium;
-    }
-    catch {
-        return null;
-    }
-}
-async function isPlaywrightAvailable() {
-    return (await loadChromium()) !== null;
-}
-/**
- * Map AI device_frame string to our DeviceFrameType
- */
-function mapDeviceFrame(frame) {
-    switch (frame.toLowerCase()) {
-        case 'iphone':
-            return 'iphone';
-        case 'ipad':
-            return 'ipad';
-        case 'macbook':
-            return 'macbook';
-        case 'browser':
-            return 'browser';
-        default:
-            return 'iphone';
-    }
-}
-/** Common named CSS colors likely in AI output. */
-const NAMED_COLORS = {
-    white: [255, 255, 255],
-    black: [0, 0, 0],
-    red: [255, 0, 0],
-    green: [0, 128, 0],
-    blue: [0, 0, 255],
-    yellow: [255, 255, 0],
-    cyan: [0, 255, 255],
-    magenta: [255, 0, 255],
-    gray: [128, 128, 128],
-    grey: [128, 128, 128],
-    orange: [255, 165, 0],
-    purple: [128, 0, 128],
-    pink: [255, 192, 203],
-};
-/**
- * Parse a CSS color string to [R, G, B] (0-255 each).
- * Supports hex (#rgb, #rrggbb, #rrggbbaa), rgb(), rgba(), and named colors.
- */
-function parseColor(color) {
-    const s = color.trim().toLowerCase();
-    if (NAMED_COLORS[s]) {
-        return NAMED_COLORS[s];
-    }
-    const rgbMatch = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(s);
-    if (rgbMatch) {
-        return [parseInt(rgbMatch[1]), parseInt(rgbMatch[2]), parseInt(rgbMatch[3])];
-    }
-    const hexMatch = /^#?([0-9a-f]{3,8})$/i.exec(s);
-    if (!hexMatch) {
-        return null;
-    }
-    const h = hexMatch[1];
-    if (h.length === 3) {
-        return [
-            parseInt(h[0] + h[0], 16),
-            parseInt(h[1] + h[1], 16),
-            parseInt(h[2] + h[2], 16),
-        ];
-    }
-    if (h.length >= 6) {
-        return [
-            parseInt(h.slice(0, 2), 16),
-            parseInt(h.slice(2, 4), 16),
-            parseInt(h.slice(4, 6), 16),
-        ];
-    }
-    return null;
-}
-/**
- * Relative luminance (0-1) per WCAG 2.x sRGB formula.
- * Returns 1.0 for unparseable input — safe default that produces dark overlay.
- */
-function colorLuminance(color) {
-    const rgb = parseColor(color);
-    if (!rgb) {
-        return 1.0;
-    }
-    const toLinear = (c) => {
-        const s = c / 255;
-        return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
-    };
-    return (0.2126 * toLinear(rgb[0]) +
-        0.7152 * toLinear(rgb[1]) +
-        0.0722 * toLinear(rgb[2]));
-}
-/** Hermite interpolation for smooth 0→1 transition. */
-function smoothstep(edge0, edge1, x) {
-    const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));
-    return t * t * (3 - 2 * t);
-}
-/**
- * Returns overlay/shadow rgba() values that contrast with the given text color.
- * Uses smooth interpolation — strong at extremes, reduced for mid-range text
- * to avoid hurting contrast in ambiguous cases.
- */
-function contrastStyles(textColor) {
-    const lum = colorLuminance(textColor);
-    // Smooth 0→1: 0 = dark text, 1 = light text
-    const lightness = smoothstep(0.15, 0.65, lum);
-    // Overlay channel: black (0) for light text, white (255) for dark text
-    const ch = Math.round(255 * (1 - lightness));
-    // Certainty: 1 at extremes, 0 at the ambiguous middle
-    const certainty = Math.abs(lightness - 0.5) * 2;
-    // Base alphas — blend between dark-overlay and light-overlay presets
-    const baseOverlay = 0.25 * lightness + 0.2 * (1 - lightness);
-    const baseShadow = 0.35 * lightness + 0.4 * (1 - lightness);
-    const baseShadowLight = 0.25 * lightness + 0.3 * (1 - lightness);
-    // Scale by certainty — 50% minimum even at peak ambiguity
-    const scale = 0.5 + 0.5 * certainty;
-    const fmt = (alpha) => (alpha * scale).toFixed(2);
-    return {
-        overlayColor: `rgba(${ch},${ch},${ch},${fmt(baseOverlay)})`,
-        shadowColor: `rgba(${ch},${ch},${ch},${fmt(baseShadow)})`,
-        shadowColorLight: `rgba(${ch},${ch},${ch},${fmt(baseShadowLight)})`,
-    };
-}
-/**
- * Create composition HTML: gradient background + text overlay + device-framed screenshot
- */
-function createCompositionHtml(framedScreenshotDataUrl, spec, targetWidth, targetHeight) {
-    const isPortrait = targetHeight > targetWidth;
-    const textColor = spec.text_color || '#ffffff';
-    const fontStyle = getInterFontStyle();
-    const fontFamily = `'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif`;
-    const { overlayColor, shadowColor, shadowColorLight } = contrastStyles(textColor);
-    if (isPortrait) {
-        // Portrait: text at top, device below
-        return `<!DOCTYPE html>
-<html>
-<head>
-${fontStyle}
-<style>
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body {
-    width: ${targetWidth}px;
-    height: ${targetHeight}px;
-    background: ${spec.background_gradient};
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    font-family: ${fontFamily};
-    overflow: hidden;
-  }
-  .text-area {
-    padding: ${Math.round(targetHeight * 0.05)}px ${Math.round(targetWidth * 0.08)}px;
-    text-align: center;
-    flex-shrink: 0;
-    max-height: 28%;
-    position: relative;
-  }
-  .text-area::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(to bottom, ${overlayColor} 0%, transparent 100%);
-    border-radius: inherit;
-    pointer-events: none;
-  }
-  .headline {
-    font-size: ${Math.round(targetWidth * 0.1)}px;
-    font-weight: 800;
-    color: ${textColor};
-    line-height: 1.15;
-    letter-spacing: -0.02em;
-    margin-bottom: ${Math.round(targetHeight * 0.01)}px;
-    text-shadow: 0 2px 12px ${shadowColor};
-    position: relative;
-    z-index: 1;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  .subheadline {
-    font-size: ${Math.round(targetWidth * 0.05)}px;
-    font-weight: 400;
-    color: ${textColor};
-    opacity: 0.85;
-    line-height: 1.3;
-    text-shadow: 0 1px 8px ${shadowColorLight};
-    position: relative;
-    z-index: 1;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  .device-area {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    min-height: 0;
-    padding: 0 ${Math.round(targetWidth * 0.02)}px;
-  }
-  .device-area img {
-    width: 92%;
-  }
-</style>
-</head>
-<body>
-  <div class="text-area">
-    <div class="headline">${escapeHtml(spec.headline)}</div>
-    ${spec.subheadline ? `<div class="subheadline">${escapeHtml(spec.subheadline)}</div>` : ''}
-  </div>
-  <div class="device-area">
-    <img src="${framedScreenshotDataUrl}" alt="screenshot" />
-  </div>
-</body>
-</html>`;
-    }
-    // Landscape: text on left, device on right
-    return `<!DOCTYPE html>
-<html>
-<head>
-${fontStyle}
-<style>
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body {
-    width: ${targetWidth}px;
-    height: ${targetHeight}px;
-    background: ${spec.background_gradient};
-    display: flex;
-    align-items: center;
-    font-family: ${fontFamily};
-    overflow: hidden;
-  }
-  .text-area {
-    flex: 0 1 auto;
-    min-width: 28%;
-    max-width: 44%;
-    padding: 0 ${Math.round(targetWidth * 0.04)}px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    text-align: left;
-    position: relative;
-  }
-  .text-area::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(to right, ${overlayColor} 0%, transparent 100%);
-    border-radius: inherit;
-    pointer-events: none;
-  }
-  .headline {
-    font-size: ${Math.round(targetWidth * 0.055)}px;
-    font-weight: 800;
-    color: ${textColor};
-    line-height: 1.15;
-    letter-spacing: -0.02em;
-    margin-bottom: ${Math.round(targetHeight * 0.02)}px;
-    text-shadow: 0 2px 12px ${shadowColor};
-    position: relative;
-    z-index: 1;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  .subheadline {
-    font-size: ${Math.round(targetWidth * 0.028)}px;
-    font-weight: 400;
-    color: ${textColor};
-    opacity: 0.85;
-    line-height: 1.4;
-    text-shadow: 0 1px 8px ${shadowColorLight};
-    position: relative;
-    z-index: 1;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  .device-area {
-    flex: 1 1 0;
-    min-width: 0;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    padding: ${Math.round(targetHeight * 0.03)}px;
-  }
-  .device-area img {
-    max-width: 100%;
-    max-height: 95%;
-    object-fit: contain;
-  }
-</style>
-</head>
-<body>
-  <div class="text-area">
-    <div class="headline">${escapeHtml(spec.headline)}</div>
-    ${spec.subheadline ? `<div class="subheadline">${escapeHtml(spec.subheadline)}</div>` : ''}
-  </div>
-  <div class="device-area">
-    <img src="${framedScreenshotDataUrl}" alt="screenshot" />
-  </div>
-</body>
-</html>`;
-}
-function escapeHtml(str) {
-    return str
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;');
-}
-/**
- * Generate all store screenshots for a given set of specs and target stores.
- *
- * Pipeline per screenshot:
- * 1. Render AI HTML template at device viewport → raw PNG
- * 2. Wrap raw PNG in device frame → framed PNG
- * 3. Compose framed PNG + text overlay + gradient background at exact store dimensions → final PNG
- */
-export async function generateStoreScreenshots(specs, options) {
-    await ensurePlaywright(isPlaywrightAvailable);
-    const chromium = await loadChromium();
-    if (!chromium) {
-        throw new Error('Failed to load chromium');
-    }
-    const { productId, targetStore, locale: _locale, verbose } = options;
-    const outputDir = join(tmpdir(), 'edsger-app-store-assets', productId);
-    await mkdir(outputDir, { recursive: true });
-    const browser = await chromium.launch({
-        headless: true,
-        args: ['--no-sandbox', '--disable-setuid-sandbox'],
-    });
-    const results = [];
-    try {
-        // Determine which store sizes to generate
-        const stores = targetStore === 'all' ? ['apple', 'google'] : [targetStore];
-        for (let specIdx = 0; specIdx < specs.length; specIdx++) {
-            const spec = specs[specIdx];
-            logInfo(`Generating screenshot ${specIdx + 1}/${specs.length}: "${spec.headline}"`);
-            // Step 1: Render the AI HTML template at a base viewport to get raw app mock
-            const deviceFrame = mapDeviceFrame(spec.device_frame);
-            let baseViewport;
-            if (deviceFrame === 'iphone') {
-                baseViewport = { width: 390, height: 844 };
-            }
-            else if (deviceFrame === 'ipad') {
-                baseViewport = { width: 1024, height: 1366 };
-            }
-            else {
-                baseViewport = { width: 1280, height: 720 };
-            }
-            let rawScreenshotBuffer;
-            try {
-                const rawContext = await browser.newContext({
-                    viewport: baseViewport,
-                    deviceScaleFactor: 2,
-                });
-                const rawPage = await rawContext.newPage();
-                await rawPage.setContent(spec.html_template, {
-                    waitUntil: 'networkidle',
-                });
-                await rawPage.waitForTimeout(500);
-                rawScreenshotBuffer = await rawPage.screenshot({
-                    type: 'png',
-                    fullPage: false,
-                });
-                await rawContext.close();
-            }
-            catch (error) {
-                logError(`Failed to render HTML template for "${spec.headline}": ${error instanceof Error ? error.message : String(error)}`);
-                continue;
-            }
-            // Step 2: Wrap in device frame
-            // Use tight canvas dimensions so the device fills most of the frame image.
-            // This prevents excess padding that would make the device appear small in composition.
-            const rawDataUrl = `data:image/png;base64,${rawScreenshotBuffer.toString('base64')}`;
-            let frameWidth;
-            if (deviceFrame === 'iphone') {
-                frameWidth = 500;
-            }
-            else if (deviceFrame === 'ipad') {
-                frameWidth = 900;
-            }
-            else {
-                frameWidth = 1600;
-            }
-            let frameHeight;
-            if (deviceFrame === 'iphone') {
-                frameHeight = 1050;
-            }
-            else if (deviceFrame === 'ipad') {
-                frameHeight = 1200;
-            }
-            else {
-                frameHeight = 1000;
-            }
-            const frameHtml = generateDeviceFrameHtml(rawDataUrl, deviceFrame, {
-                background: 'transparent',
-                shadow: true,
-                canvasWidth: frameWidth,
-                canvasHeight: frameHeight,
-            });
-            let framedBuffer;
-            try {
-                const frameContext = await browser.newContext({
-                    viewport: { width: frameWidth, height: frameHeight },
-                    deviceScaleFactor: 2,
-                });
-                const framePage = await frameContext.newPage();
-                await framePage.setContent(frameHtml, { waitUntil: 'load' });
-                await framePage.waitForTimeout(300);
-                framedBuffer = await framePage.screenshot({
-                    type: 'png',
-                    fullPage: false,
-                    omitBackground: true,
-                });
-                await frameContext.close();
-            }
-            catch (error) {
-                logError(`Failed to apply device frame for "${spec.headline}": ${error instanceof Error ? error.message : String(error)}`);
-                continue;
-            }
-            const framedDataUrl = `data:image/png;base64,${framedBuffer.toString('base64')}`;
-            // Step 3: For each target store + device size, compose final screenshot
-            for (const store of stores) {
-                const sizes = STORE_SCREENSHOT_SIZES[store];
-                for (const [deviceType, size] of Object.entries(sizes)) {
-                    await composeStoreScreenshot({
-                        browser,
-                        framedDataUrl,
-                        spec,
-                        specIdx,
-                        store,
-                        deviceType,
-                        size: size,
-                        outputDir,
-                        results,
-                        verbose,
-                    });
-                }
-            }
-        }
-    }
-    finally {
-        await browser.close();
-    }
-    logInfo(`Generated ${results.length} store screenshots in ${outputDir}`);
-    return results;
-}

package/dist/phases/app-store-generation/uploader.d.ts

@@ -1,19 +0,0 @@
-/**
- * Uploads generated app store screenshots to Supabase Storage
- * and saves metadata via MCP.
- *
- * Reuses the same upload pattern as services/video/video-uploader.ts.
- */
-import { type AppStoreScreenshot } from '../../api/app-store.js';
-import { type GeneratedScreenshot } from './screenshot-composer.js';
-/**
- * Upload all generated screenshots to Supabase Storage and save metadata via MCP.
- *
- * @returns Locale-keyed Record of screenshot metadata saved to the database
- */
-export declare function uploadAppStoreScreenshots(screenshots: GeneratedScreenshot[], options: {
-    productId: string;
-    configId: string;
-    locale: string;
-    verbose?: boolean;
-}): Promise<Record<string, AppStoreScreenshot[]>>;