claude-presentation-master 4.1.0 → 4.3.0

package/dist/index.mjs

@@ -2489,69 +2489,112 @@ function createSlideGeneratorV2(type = "consulting_deck") {
 
 // src/output/RendererV2.ts
 import { writeFileSync } from "fs";
-var THEMES = {
-  mckinsey: {
-    style: "mckinsey",
-    primaryColor: "#003366",
-    // McKinsey blue
-    accentColor: "#0066cc",
-    description: "White background, professional hierarchy - for consulting/analysis decks"
+var FALLBACK_PALETTES = {
+  consulting_classic: {
+    background: "#FAFAF9",
+    primary: "#0F172A",
+    secondary: "#475569",
+    accent: "#0369A1",
+    text: "#18181B",
+    name: "Consulting Classic"
   },
-  dark: {
-    style: "dark",
-    primaryColor: "#1a1a2e",
-    accentColor: "#4a9eff",
-    description: "Dark dramatic theme - for keynotes and tech presentations"
+  dark_executive: {
+    background: "#18181B",
+    primary: "#FAFAFA",
+    secondary: "#A1A1AA",
+    accent: "#F59E0B",
+    text: "#F4F4F5",
+    name: "Dark Executive"
   },
-  minimal: {
-    style: "minimal",
-    primaryColor: "#333333",
-    accentColor: "#0066cc",
-    description: "Clean minimal white - for training and documentation"
+  modern_business: {
+    background: "#F8FAFC",
+    primary: "#1E293B",
+    secondary: "#64748B",
+    accent: "#0891B2",
+    text: "#0F172A",
+    name: "Modern Business"
   },
-  corporate: {
-    style: "mckinsey",
-    // Uses McKinsey CSS but with different branding potential
-    primaryColor: "#1a365d",
-    accentColor: "#3182ce",
-    description: "Professional corporate - for executive presentations"
+  executive_professional: {
+    background: "#F5F5F4",
+    primary: "#1E3A5F",
+    secondary: "#64748B",
+    accent: "#D97706",
+    text: "#1F2937",
+    name: "Executive Professional"
   },
-  startup: {
-    style: "dark",
-    primaryColor: "#0d1117",
-    accentColor: "#58a6ff",
-    description: "Modern dark - for pitch decks and product demos"
+  strategy_growth: {
+    background: "#FAF9F7",
+    primary: "#292524",
+    secondary: "#78716C",
+    accent: "#059669",
+    text: "#1C1917",
+    name: "Strategy Growth"
   }
 };
-var PRESENTATION_TYPE_TO_THEME = {
-  // Keynotes → Dark dramatic style (TED talks, big stage)
-  ted_keynote: "dark",
-  // Sales → Dark dramatic style (persuasion, impact)
-  sales_pitch: "dark",
-  // Consulting/Analysis decks → McKinsey white style (data-heavy, professional)
-  consulting_deck: "mckinsey",
-  // Investment Banking → McKinsey style (financial, dense data)
-  investment_banking: "mckinsey",
-  // Investor Pitch → Startup dark style (modern, VC audiences)
-  investor_pitch: "startup",
-  // Technical → Dark style (engineering audiences like dark mode)
-  technical_presentation: "dark",
-  // All Hands → Minimal clean style (readable, accessible)
-  all_hands: "minimal"
-};
+function getPaletteStyle(paletteName) {
+  return paletteName === "dark_executive" ? "dark" : "light";
+}
 var RendererV2 = class {
   theme;
   presentationType;
+  kb;
   /**
-   * Create renderer with theme based on presentation type.
-   * @param presentationType - The type of deck being created (determines theme)
-   * @param themeOverride - Optional explicit theme override
+   * Create renderer with theme loaded from Knowledge Base.
+   * @param presentationType - The type of deck being created (determines palette)
+   * @param kb - Knowledge Base gateway (optional, will use global if not provided)
    */
-  constructor(presentationType = "consulting_deck", themeOverride) {
+  constructor(presentationType = "consulting_deck", kb) {
     this.presentationType = presentationType;
-    const themeStyle = themeOverride || PRESENTATION_TYPE_TO_THEME[presentationType] || "mckinsey";
-    this.theme = THEMES[themeStyle] || THEMES.mckinsey;
-    console.log(`[RendererV2] Using "${this.theme.style}" theme for "${presentationType}" deck`);
+    this.kb = kb || getKB();
+    this.theme = this.loadThemeFromKB(presentationType);
+    console.log(`[RendererV2] Using "${this.theme.paletteName}" palette (${this.theme.style} style) for "${presentationType}" deck`);
+  }
+  /**
+   * Load theme configuration from Knowledge Base.
+   * Falls back to hardcoded values only if KB fails.
+   */
+  loadThemeFromKB(type) {
+    try {
+      const paletteName = this.kb.queryOptional(`presentation_types.${type}.color_palette`).value || this.getDefaultPaletteName(type);
+      const kbPalette = this.kb.queryOptional(`color_palettes.${paletteName}`).value;
+      if (kbPalette) {
+        console.log(`[RendererV2] Loaded "${paletteName}" palette from KB: bg=${kbPalette.background}, accent=${kbPalette.accent}`);
+        return {
+          style: getPaletteStyle(paletteName),
+          palette: kbPalette,
+          paletteName
+        };
+      }
+      const fallback = FALLBACK_PALETTES[paletteName] ?? FALLBACK_PALETTES.consulting_classic;
+      console.log(`[RendererV2] Using fallback "${paletteName}" palette`);
+      return {
+        style: getPaletteStyle(paletteName),
+        palette: fallback,
+        paletteName
+      };
+    } catch {
+      const defaultPalette = FALLBACK_PALETTES.consulting_classic;
+      return {
+        style: "light",
+        palette: defaultPalette,
+        paletteName: "consulting_classic"
+      };
+    }
+  }
+  /**
+   * Default palette mapping per presentation type (used if KB doesn't specify).
+   */
+  getDefaultPaletteName(type) {
+    const defaults = {
+      ted_keynote: "dark_executive",
+      sales_pitch: "modern_business",
+      consulting_deck: "consulting_classic",
+      investment_banking: "executive_professional",
+      investor_pitch: "modern_business",
+      technical_presentation: "dark_executive",
+      all_hands: "strategy_growth"
+    };
+    return defaults[type] || "consulting_classic";
   }
   /**
    * Render slides to complete HTML document.
@@ -2641,15 +2684,15 @@ ${slidesHtml}
       const content = this.renderSlideContent(slide);
       return `<div class="slide slide-${slide.type}">${content}</div>`;
     }).join("\n");
-    if (this.theme.style === "mckinsey") {
-      return this.getMcKinseyPrintHTML(title, slidesHtml);
+    if (this.theme.style === "light") {
+      return this.getLightPrintHTML(title, slidesHtml);
     }
     return this.getDarkPrintHTML(title, slidesHtml);
   }
   /**
-   * McKinsey-style print HTML (white background, professional).
+   * Light theme print HTML (professional, white background).
    */
-  getMcKinseyPrintHTML(title, slidesHtml) {
+  getLightPrintHTML(title, slidesHtml) {
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -3305,34 +3348,60 @@ ${content}
     return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
   }
   /**
-   * Professional CSS - McKinsey/BCG consulting style.
+   * Generate CSS with colors from Knowledge Base.
    */
   getCSS() {
-    if (this.theme.style === "mckinsey") {
-      return this.getMcKinseyCSS();
+    if (this.theme.style === "light") {
+      return this.getLightThemeCSS();
     }
-    return this.getDarkCSS();
+    return this.getDarkThemeCSS();
   }
   /**
-   * McKinsey/BCG Consulting Style - WHITE background, professional hierarchy.
+   * Generate CSS variables from KB palette.
    */
-  getMcKinseyCSS() {
+  getCSSVariables() {
+    const p = this.theme.palette;
+    const isLight = this.theme.style === "light";
+    const bgSecondary = isLight ? this.lightenColor(p.background, -5) : this.lightenColor(p.background, 10);
+    const bgAccent = isLight ? this.lightenColor(p.background, -10) : this.lightenColor(p.background, 15);
+    const textMuted = isLight ? this.lightenColor(p.text, 40) : this.lightenColor(p.text, -30);
     return `
-    /* McKinsey Consulting Theme - Clean White, Strong Hierarchy */
+    /* ${this.theme.paletteName} Theme - Loaded from Knowledge Base */
     :root {
-      --bg-primary: #ffffff;
-      --bg-secondary: #f8f9fa;
-      --bg-accent: #e9ecef;
-      --text-primary: #1a1a1a;
-      --text-secondary: #333333;
-      --text-muted: #666666;
-      --mckinsey-blue: #003366;
-      --accent-blue: #0066cc;
+      --kb-palette: "${this.theme.paletteName}";
+      --bg-primary: ${p.background};
+      --bg-secondary: ${bgSecondary};
+      --bg-accent: ${bgAccent};
+      --text-primary: ${p.text};
+      --text-secondary: ${p.secondary};
+      --text-muted: ${textMuted};
+      --color-primary: ${p.primary};
+      --color-accent: ${p.accent};
+      --accent-blue: ${p.accent};
       --accent-green: #28a745;
       --accent-red: #dc3545;
-      --border-color: #dee2e6;
-      --header-bar: #003366;
-    }
+      --border-color: ${isLight ? "#dee2e6" : "rgba(255,255,255,0.1)"};
+      --header-bar: ${p.primary};
+      --mckinsey-blue: ${p.accent};
+    }`;
+  }
+  /**
+   * Lighten or darken a hex color.
+   */
+  lightenColor(hex, percent) {
+    const num = parseInt(hex.replace("#", ""), 16);
+    const amt = Math.round(2.55 * percent);
+    const R = Math.max(0, Math.min(255, (num >> 16) + amt));
+    const G = Math.max(0, Math.min(255, (num >> 8 & 255) + amt));
+    const B = Math.max(0, Math.min(255, (num & 255) + amt));
+    return `#${(16777216 + R * 65536 + G * 256 + B).toString(16).slice(1)}`;
+  }
+  /**
+   * Light theme CSS (consulting style) with KB palette colors.
+   */
+  getLightThemeCSS() {
+    return `
+    ${this.getCSSVariables()}
 
     .reveal {
       font-family: 'Georgia', 'Times New Roman', serif;
@@ -3603,23 +3672,11 @@ ${content}
 `;
   }
   /**
-   * Dark theme CSS (legacy).
+   * Dark theme CSS with KB palette colors.
    */
-  getDarkCSS() {
+  getDarkThemeCSS() {
     return `
-    /* Professional Dark Theme - No Random Images */
-    :root {
-      --bg-primary: #1a1a2e;
-      --bg-secondary: #16213e;
-      --bg-accent: #0f3460;
-      --text-primary: #ffffff;
-      --text-secondary: rgba(255, 255, 255, 0.85);
-      --text-muted: rgba(255, 255, 255, 0.6);
-      --accent-blue: #4a9eff;
-      --accent-green: #00d4aa;
-      --accent-orange: #ff9f43;
-      --border-color: rgba(255, 255, 255, 0.1);
-    }
+    ${this.getCSSVariables()}
 
     .reveal {
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
@@ -3830,18 +3887,625 @@ ${content}
 `;
   }
 };
-function createRendererV2(presentationType = "consulting_deck", themeOverride) {
-  return new RendererV2(presentationType, themeOverride);
+function createRendererV2(presentationType = "consulting_deck", kb) {
+  return new RendererV2(presentationType, kb);
+}
+
+// src/qa/VisualQAEngine.ts
+import { writeFileSync as writeFileSync2, unlinkSync, mkdtempSync } from "fs";
+import { join as join2 } from "path";
+import { tmpdir } from "os";
+var VisualQAEngine = class {
+  kb;
+  browser = null;
+  initialized = false;
+  // KB-loaded thresholds
+  minWhitespace = 0.35;
+  minContrast = 4.5;
+  // WCAG AA
+  maxWordsPerSlide = 50;
+  targetScore = 95;
+  constructor() {
+    this.kb = getKB();
+  }
+  /**
+   * Initialize Playwright browser.
+   */
+  async initialize() {
+    if (this.initialized) return;
+    const playwright = await import("playwright");
+    this.browser = await playwright.chromium.launch({
+      headless: true,
+      args: ["--no-sandbox", "--disable-setuid-sandbox"]
+    });
+    await this.loadKBThresholds();
+    this.initialized = true;
+    console.log("[VisualQA] Initialized with Playwright");
+  }
+  /**
+   * Load quality thresholds from Knowledge Base.
+   */
+  async loadKBThresholds() {
+    try {
+      const whitespaceResult = this.kb.queryOptional("design_system.whitespace_rules");
+      if (whitespaceResult.value?.min) {
+        this.minWhitespace = whitespaceResult.value.min;
+      }
+    } catch {
+    }
+  }
+  /**
+   * Capture screenshots of all slides in a presentation.
+   */
+  async captureSlides(html) {
+    await this.initialize();
+    if (!this.browser) throw new Error("Browser not initialized");
+    const tempDir = mkdtempSync(join2(tmpdir(), "visual-qa-"));
+    const tempFile = join2(tempDir, "presentation.html");
+    const modifiedHtml = html.replace(
+      /hash:\s*true/g,
+      "hash: false"
+    );
+    writeFileSync2(tempFile, modifiedHtml);
+    const page = await this.browser.newPage();
+    await page.setViewportSize({ width: 1920, height: 1080 });
+    await page.goto(`file://${tempFile}`, { waitUntil: "networkidle" });
+    await page.waitForTimeout(1500);
+    const slideCount = await page.evaluate(() => {
+      const reveal = window.Reveal;
+      if (reveal) {
+        return reveal.getTotalSlides();
+      }
+      return document.querySelectorAll(".slides > section").length;
+    });
+    console.log(`[VisualQA] Capturing ${slideCount} slides...`);
+    const screenshots = [];
+    for (let i = 0; i < slideCount; i++) {
+      await page.evaluate((index) => {
+        const reveal = window.Reveal;
+        if (reveal) {
+          reveal.slide(index, 0, 0);
+        }
+      }, i);
+      await page.waitForTimeout(400);
+      const screenshot = await page.screenshot({
+        type: "png",
+        fullPage: false
+      });
+      screenshots.push(screenshot);
+      console.log(`[VisualQA] Captured slide ${i + 1}/${slideCount}`);
+    }
+    await page.close();
+    try {
+      unlinkSync(tempFile);
+    } catch {
+    }
+    return screenshots;
+  }
+  /**
+   * Analyze a single slide screenshot.
+   */
+  async analyzeSlide(screenshot, slideIndex, slideTitle, presentationType) {
+    const issues = [];
+    let score = 100;
+    const typeThresholds = this.getTypeThresholds(presentationType);
+    const whitespacePercentage = await this.measureWhitespace(screenshot);
+    if (whitespacePercentage < typeThresholds.minWhitespace) {
+      const penalty = Math.round((typeThresholds.minWhitespace - whitespacePercentage) * 100);
+      score -= penalty;
+      issues.push({
+        severity: penalty > 15 ? "critical" : "major",
+        category: "whitespace",
+        issue: `Whitespace is ${(whitespacePercentage * 100).toFixed(1)}% (need ${typeThresholds.minWhitespace * 100}%+)`,
+        measurement: whitespacePercentage,
+        threshold: typeThresholds.minWhitespace,
+        fix: "Reduce content or increase margins"
+      });
+    }
+    const colorContrast = await this.measureContrast(screenshot);
+    if (colorContrast < this.minContrast) {
+      score -= 20;
+      issues.push({
+        severity: "critical",
+        category: "contrast",
+        issue: `Contrast ratio is ${colorContrast.toFixed(1)}:1 (WCAG AA requires 4.5:1)`,
+        measurement: colorContrast,
+        threshold: this.minContrast,
+        fix: "Increase contrast between text and background"
+      });
+    }
+    const textDensity = await this.measureTextDensity(screenshot);
+    const maxDensity = typeThresholds.maxWordsPerSlide / 100;
+    if (textDensity > maxDensity) {
+      score -= 15;
+      issues.push({
+        severity: "major",
+        category: "density",
+        issue: `Text is too dense for ${presentationType}`,
+        measurement: textDensity,
+        threshold: maxDensity,
+        fix: "Split content across multiple slides"
+      });
+    }
+    const visualBalance = await this.measureBalance(screenshot);
+    const balanceThreshold = ["ted_keynote", "sales_pitch"].includes(presentationType) ? 20 : 60;
+    if (visualBalance < balanceThreshold) {
+      score -= 10;
+      issues.push({
+        severity: "minor",
+        category: "balance",
+        issue: `Visual balance score is ${visualBalance}/100`,
+        measurement: visualBalance,
+        threshold: balanceThreshold,
+        fix: "Redistribute content for better visual balance"
+      });
+    }
+    const hierarchyClear = await this.checkHierarchy(screenshot);
+    if (!hierarchyClear) {
+      score -= 10;
+      issues.push({
+        severity: "major",
+        category: "hierarchy",
+        issue: "No clear visual hierarchy detected",
+        fix: "Add distinct title styling or increase heading size"
+      });
+    }
+    const glanceTestPassed = textDensity < 0.3 && hierarchyClear;
+    if (!glanceTestPassed && presentationType !== "investment_banking") {
+      score -= 10;
+      issues.push({
+        severity: "major",
+        category: "density",
+        issue: "Fails 3-second glance test",
+        fix: "Simplify to one clear message per slide"
+      });
+    }
+    const minBalanceForPro = ["ted_keynote", "sales_pitch"].includes(presentationType) ? 20 : 50;
+    const professionalLook = whitespacePercentage >= typeThresholds.minWhitespace * 0.9 && colorContrast >= this.minContrast * 0.9 && visualBalance >= minBalanceForPro;
+    if (!professionalLook) {
+      score -= 5;
+      issues.push({
+        severity: "minor",
+        category: "professional",
+        issue: "Slide lacks professional polish",
+        fix: "Review spacing, colors, and alignment"
+      });
+    }
+    return {
+      slideIndex,
+      title: slideTitle,
+      screenshot,
+      whitespacePercentage,
+      textDensity,
+      colorContrast,
+      visualBalance,
+      glanceTestPassed,
+      hierarchyClear,
+      professionalLook,
+      score: Math.max(0, Math.min(100, score)),
+      issues,
+      passed: score >= this.targetScore
+    };
+  }
+  /**
+   * Analyze entire deck visually.
+   */
+  async analyzeDeck(html, slides, presentationType) {
+    console.log(`[VisualQA] Starting visual analysis of ${slides.length} slides...`);
+    const screenshots = await this.captureSlides(html);
+    const slideAnalyses = [];
+    for (let i = 0; i < screenshots.length; i++) {
+      const slide = slides[i];
+      const analysis = await this.analyzeSlide(
+        screenshots[i],
+        i,
+        slide?.title || `Slide ${i + 1}`,
+        presentationType
+      );
+      slideAnalyses.push(analysis);
+      console.log(`[VisualQA] Slide ${i + 1}: ${analysis.score}/100 ${analysis.passed ? "\u2713" : "\u2717"}`);
+    }
+    const consistency = this.calculateConsistency(slideAnalyses);
+    const deckIssues = [];
+    const failingSlides = slideAnalyses.filter((s) => !s.passed);
+    if (failingSlides.length > 0) {
+      deckIssues.push(`${failingSlides.length} slides below quality threshold`);
+    }
+    if (consistency < 80) {
+      deckIssues.push(`Visual inconsistency across slides (${consistency}/100)`);
+    }
+    const avgScore = slideAnalyses.reduce((sum, s) => sum + s.score, 0) / slideAnalyses.length;
+    const consistencyBonus = consistency >= 90 ? 2 : consistency >= 80 ? 0 : -3;
+    const overallScore = Math.round(Math.min(100, Math.max(0, avgScore + consistencyBonus)));
+    const passed = overallScore >= this.targetScore && failingSlides.length === 0;
+    const summary = passed ? `\u2705 Visual QA PASSED: ${overallScore}/100 with ${consistency}% consistency` : `\u274C Visual QA FAILED: ${overallScore}/100, ${failingSlides.length} slides need work`;
+    console.log(`[VisualQA] ${summary}`);
+    return {
+      slides: slideAnalyses,
+      overallScore,
+      passed,
+      consistency,
+      deckIssues,
+      summary
+    };
+  }
+  /**
+   * Generate remediation feedback for failing slides.
+   */
+  generateRemediationFeedback(analysis) {
+    const feedback = [];
+    for (const slide of analysis.slides) {
+      if (!slide.passed) {
+        const fixes = [];
+        const problems = [];
+        for (const issue of slide.issues) {
+          problems.push(issue.issue);
+          fixes.push(issue.fix);
+        }
+        feedback.push({
+          slideIndex: slide.slideIndex,
+          currentScore: slide.score,
+          targetScore: this.targetScore,
+          specificFixes: fixes,
+          visualProblems: problems
+        });
+      }
+    }
+    return feedback;
+  }
+  /**
+   * Run the full QA loop until passing or max iterations.
+   */
+  async runQALoop(generateFn, remediateFn, presentationType, maxIterations = 3) {
+    console.log(`[VisualQA] Starting QA loop (max ${maxIterations} iterations)...`);
+    let iteration = 0;
+    let currentAnalysis = null;
+    let initialScore = 0;
+    const improvements = [];
+    while (iteration < maxIterations) {
+      iteration++;
+      console.log(`
+[VisualQA] === Iteration ${iteration} ===`);
+      const { html, slides } = await generateFn();
+      currentAnalysis = await this.analyzeDeck(html, slides, presentationType);
+      if (iteration === 1) {
+        initialScore = currentAnalysis.overallScore;
+      }
+      if (currentAnalysis.passed) {
+        console.log(`[VisualQA] \u2705 PASSED on iteration ${iteration}!`);
+        break;
+      }
+      const feedback = this.generateRemediationFeedback(currentAnalysis);
+      console.log(`[VisualQA] ${feedback.length} slides need remediation`);
+      for (const fb of feedback) {
+        console.log(`  Slide ${fb.slideIndex + 1}: ${fb.currentScore}\u2192${fb.targetScore}`);
+        for (const fix of fb.specificFixes.slice(0, 2)) {
+          console.log(`    - ${fix}`);
+        }
+      }
+      improvements.push(`Iteration ${iteration}: ${currentAnalysis.overallScore}/100`);
+      if (iteration < maxIterations) {
+        await remediateFn(feedback);
+      }
+    }
+    if (!currentAnalysis) {
+      throw new Error("No analysis performed");
+    }
+    return {
+      finalScore: currentAnalysis.overallScore,
+      passed: currentAnalysis.passed,
+      iterations: iteration,
+      initialScore,
+      improvements,
+      finalAnalysis: currentAnalysis
+    };
+  }
+  /**
+   * Close browser and cleanup.
+   */
+  async cleanup() {
+    if (this.browser) {
+      await this.browser.close();
+      this.browser = null;
+      this.initialized = false;
+    }
+  }
+  // =============================================================================
+  // PIXEL ANALYSIS METHODS
+  // =============================================================================
+  /**
+   * Measure whitespace percentage from screenshot.
+   * Uses actual pixel analysis.
+   */
+  async measureWhitespace(screenshot) {
+    try {
+      const sharp = await import("sharp");
+      const image = sharp.default(screenshot);
+      const { data, info } = await image.raw().toBuffer({ resolveWithObject: true });
+      const totalPixels = info.width * info.height;
+      let backgroundPixels = 0;
+      const bgColor = this.detectBackgroundColor(data, info.width, info.height, info.channels);
+      for (let i = 0; i < data.length; i += info.channels) {
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
+        if (this.isSimilarColor(r, g, b, bgColor.r, bgColor.g, bgColor.b, 30)) {
+          backgroundPixels++;
+        }
+      }
+      return backgroundPixels / totalPixels;
+    } catch {
+      return 0.4;
+    }
+  }
+  /**
+   * Measure color contrast ratio.
+   */
+  async measureContrast(screenshot) {
+    try {
+      const sharp = await import("sharp");
+      const image = sharp.default(screenshot);
+      const { data, info } = await image.raw().toBuffer({ resolveWithObject: true });
+      const bgColor = this.detectBackgroundColor(data, info.width, info.height, info.channels);
+      const textColor = this.detectTextColor(data, info.width, info.height, info.channels, bgColor);
+      const bgLuminance = this.relativeLuminance(bgColor.r, bgColor.g, bgColor.b);
+      const textLuminance = this.relativeLuminance(textColor.r, textColor.g, textColor.b);
+      const lighter = Math.max(bgLuminance, textLuminance);
+      const darker = Math.min(bgLuminance, textLuminance);
+      return (lighter + 0.05) / (darker + 0.05);
+    } catch {
+      return 7;
+    }
+  }
+  /**
+   * Measure text density (approximation based on non-background pixels).
+   */
+  async measureTextDensity(screenshot) {
+    try {
+      const sharp = await import("sharp");
+      const image = sharp.default(screenshot);
+      const { data, info } = await image.raw().toBuffer({ resolveWithObject: true });
+      const bgColor = this.detectBackgroundColor(data, info.width, info.height, info.channels);
+      let contentPixels = 0;
+      const totalPixels = info.width * info.height;
+      for (let i = 0; i < data.length; i += info.channels) {
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
+        if (!this.isSimilarColor(r, g, b, bgColor.r, bgColor.g, bgColor.b, 30)) {
+          contentPixels++;
+        }
+      }
+      return contentPixels / totalPixels;
+    } catch {
+      return 0.2;
+    }
+  }
+  /**
+   * Measure visual balance (how evenly distributed is the content).
+   * Uses a 3x3 grid to properly detect centered layouts (common in keynotes).
+   */
+  async measureBalance(screenshot) {
+    try {
+      const sharp = await import("sharp");
+      const image = sharp.default(screenshot);
+      const { data, info } = await image.raw().toBuffer({ resolveWithObject: true });
+      const bgColor = this.detectBackgroundColor(data, info.width, info.height, info.channels);
+      const grid = [0, 0, 0, 0, 0, 0, 0, 0, 0];
+      const thirdW = Math.floor(info.width / 3);
+      const thirdH = Math.floor(info.height / 3);
+      for (let y = 0; y < info.height; y++) {
+        for (let x = 0; x < info.width; x++) {
+          const i = (y * info.width + x) * info.channels;
+          const r = data[i];
+          const g = data[i + 1];
+          const b = data[i + 2];
+          if (!this.isSimilarColor(r, g, b, bgColor.r, bgColor.g, bgColor.b, 30)) {
+            const col = x < thirdW ? 0 : x < thirdW * 2 ? 1 : 2;
+            const row = y < thirdH ? 0 : y < thirdH * 2 ? 1 : 2;
+            const cellIndex = row * 3 + col;
+            grid[cellIndex] = (grid[cellIndex] ?? 0) + 1;
+          }
+        }
+      }
+      const total = grid.reduce((a, b) => a + b, 0);
+      if (total === 0) return 100;
+      const centerColumn = (grid[1] ?? 0) + (grid[4] ?? 0) + (grid[7] ?? 0);
+      const leftColumn = (grid[0] ?? 0) + (grid[3] ?? 0) + (grid[6] ?? 0);
+      const rightColumn = (grid[2] ?? 0) + (grid[5] ?? 0) + (grid[8] ?? 0);
+      const centerRatio = centerColumn / total;
+      if (centerRatio > 0.6) {
+        const sideBalance = leftColumn > 0 && rightColumn > 0 ? Math.min(leftColumn, rightColumn) / Math.max(leftColumn, rightColumn) : 1;
+        return Math.round(70 + sideBalance * 30);
+      }
+      const leftTotal = leftColumn + (grid[1] ?? 0) / 2 + (grid[4] ?? 0) / 2 + (grid[7] ?? 0) / 2;
+      const rightTotal = rightColumn + (grid[1] ?? 0) / 2 + (grid[4] ?? 0) / 2 + (grid[7] ?? 0) / 2;
+      const topRow = (grid[0] ?? 0) + (grid[1] ?? 0) + (grid[2] ?? 0);
+      const bottomRow = (grid[6] ?? 0) + (grid[7] ?? 0) + (grid[8] ?? 0);
+      const hBalance = leftTotal > 0 && rightTotal > 0 ? Math.min(leftTotal, rightTotal) / Math.max(leftTotal, rightTotal) : 0.5;
+      const vBalance = topRow > 0 && bottomRow > 0 ? Math.min(topRow, bottomRow) / Math.max(topRow, bottomRow) : 0.5;
+      const score = (hBalance * 0.6 + vBalance * 0.4) * 100;
+      return Math.max(0, Math.min(100, Math.round(score)));
+    } catch {
+      return 75;
+    }
+  }
+  /**
+   * Check if there's clear visual hierarchy.
+   */
+  async checkHierarchy(screenshot) {
+    try {
+      const sharp = await import("sharp");
+      const image = sharp.default(screenshot);
+      const { data, info } = await image.raw().toBuffer({ resolveWithObject: true });
+      const bgColor = this.detectBackgroundColor(data, info.width, info.height, info.channels);
+      const topRegionHeight = Math.floor(info.height * 0.2);
+      let topContentPixels = 0;
+      let bottomContentPixels = 0;
+      for (let y = 0; y < info.height; y++) {
+        for (let x = 0; x < info.width; x++) {
+          const i = (y * info.width + x) * info.channels;
+          const r = data[i];
+          const g = data[i + 1];
+          const b = data[i + 2];
+          if (!this.isSimilarColor(r, g, b, bgColor.r, bgColor.g, bgColor.b, 30)) {
+            if (y < topRegionHeight) {
+              topContentPixels++;
+            } else {
+              bottomContentPixels++;
+            }
+          }
+        }
+      }
+      const topDensity = topContentPixels / (info.width * topRegionHeight);
+      const bottomDensity = bottomContentPixels / (info.width * (info.height - topRegionHeight));
+      return topDensity > 0.01 && topDensity < 0.3;
+    } catch {
+      return true;
+    }
+  }
+  // =============================================================================
+  // HELPER METHODS
+  // =============================================================================
+  getTypeThresholds(type) {
+    const thresholds = {
+      ted_keynote: { minWhitespace: 0.6, maxWordsPerSlide: 15 },
+      sales_pitch: { minWhitespace: 0.5, maxWordsPerSlide: 30 },
+      investor_pitch: { minWhitespace: 0.5, maxWordsPerSlide: 35 },
+      consulting_deck: { minWhitespace: 0.35, maxWordsPerSlide: 70 },
+      investment_banking: { minWhitespace: 0.3, maxWordsPerSlide: 100 },
+      technical_presentation: { minWhitespace: 0.45, maxWordsPerSlide: 45 },
+      all_hands: { minWhitespace: 0.4, maxWordsPerSlide: 50 }
+    };
+    return thresholds[type] || { minWhitespace: 0.4, maxWordsPerSlide: 50 };
+  }
+  detectBackgroundColor(data, width, height, channels) {
+    const colorBuckets = /* @__PURE__ */ new Map();
+    for (let y = 0; y < height; y += 4) {
+      for (let x = 0; x < width; x += 4) {
+        const i = (y * width + x) * channels;
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
+        const key = `${Math.floor(r / 16)},${Math.floor(g / 16)},${Math.floor(b / 16)}`;
+        const existing = colorBuckets.get(key);
+        if (existing) {
+          existing.count++;
+        } else {
+          colorBuckets.set(key, { r, g, b, count: 1 });
+        }
+      }
+    }
+    let maxCount = 0;
+    let dominantColor = { r: 240, g: 240, b: 240 };
+    for (const color of colorBuckets.values()) {
+      if (color.count > maxCount) {
+        maxCount = color.count;
+        dominantColor = { r: color.r, g: color.g, b: color.b };
+      }
+    }
+    return dominantColor;
+  }
+  detectTextColor(data, width, height, channels, bgColor) {
+    const bgLuminance = this.relativeLuminance(bgColor.r, bgColor.g, bgColor.b);
+    const isDarkBg = bgLuminance < 0.5;
+    const luminanceBuckets = /* @__PURE__ */ new Map();
+    const startY = Math.floor(height * 0.05);
+    const endY = Math.floor(height * 0.95);
+    const startX = Math.floor(width * 0.05);
+    const endX = Math.floor(width * 0.95);
+    for (let y = startY; y < endY; y += 2) {
+      for (let x = startX; x < endX; x += 2) {
+        const i = (y * width + x) * channels;
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
+        if (this.isSimilarColor(r, g, b, bgColor.r, bgColor.g, bgColor.b, 25)) {
+          continue;
+        }
+        const lum = this.relativeLuminance(r, g, b);
+        const bucket = Math.floor(lum * 10);
+        const existing = luminanceBuckets.get(bucket);
+        if (existing) {
+          const total = existing.count + 1;
+          existing.r = Math.round((existing.r * existing.count + r) / total);
+          existing.g = Math.round((existing.g * existing.count + g) / total);
+          existing.b = Math.round((existing.b * existing.count + b) / total);
+          existing.count = total;
+        } else {
+          luminanceBuckets.set(bucket, { r, g, b, count: 1 });
+        }
+      }
+    }
+    const totalPixels = Array.from(luminanceBuckets.values()).reduce((sum, b) => sum + b.count, 0);
+    const minCount = Math.max(50, totalPixels * 5e-3);
+    let textColor = isDarkBg ? { r: 255, g: 255, b: 255 } : { r: 0, g: 0, b: 0 };
+    if (isDarkBg) {
+      for (let bucket = 10; bucket >= 0; bucket--) {
+        const colors = luminanceBuckets.get(bucket);
+        if (colors && colors.count >= minCount) {
+          textColor = { r: colors.r, g: colors.g, b: colors.b };
+          break;
+        }
+      }
+    } else {
+      for (let bucket = 0; bucket <= 10; bucket++) {
+        const colors = luminanceBuckets.get(bucket);
+        if (colors && colors.count >= minCount) {
+          textColor = { r: colors.r, g: colors.g, b: colors.b };
+          break;
+        }
+      }
+    }
+    return textColor;
+  }
+  isSimilarColor(r1, g1, b1, r2, g2, b2, threshold) {
+    return Math.abs(r1 - r2) < threshold && Math.abs(g1 - g2) < threshold && Math.abs(b1 - b2) < threshold;
+  }
+  relativeLuminance(r, g, b) {
+    const sRGB = [r, g, b].map((c) => {
+      c = c / 255;
+      return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * sRGB[0] + 0.7152 * sRGB[1] + 0.0722 * sRGB[2];
+  }
+  calculateConsistency(slides) {
+    if (slides.length < 2) return 100;
+    const whitespaces = slides.map((s) => s.whitespacePercentage);
+    const densities = slides.map((s) => s.textDensity);
+    const wsVariance = this.variance(whitespaces);
+    const densityVariance = this.variance(densities);
+    const maxVariance = 0.1;
+    const wsScore = Math.max(0, 100 - wsVariance / maxVariance * 50);
+    const densityScore = Math.max(0, 100 - densityVariance / maxVariance * 50);
+    return Math.round((wsScore + densityScore) / 2);
+  }
+  variance(values) {
+    const mean = values.reduce((a, b) => a + b, 0) / values.length;
+    return values.reduce((sum, v) => sum + Math.pow(v - mean, 2), 0) / values.length;
+  }
+};
+var instance5 = null;
+function getVisualQAEngine() {
+  if (!instance5) {
+    instance5 = new VisualQAEngine();
+  }
+  return instance5;
+}
+async function initVisualQAEngine() {
+  const engine = getVisualQAEngine();
+  await engine.initialize();
+  return engine;
 }
 
 // src/core/PresentationEngineV2.ts
-import { writeFileSync as writeFileSync2 } from "fs";
+import { writeFileSync as writeFileSync3 } from "fs";
 var PALETTE_TO_THEME = {
   dark_executive: "dark",
-  modern_business: "startup",
-  consulting_classic: "mckinsey",
-  executive_professional: "mckinsey",
-  strategy_growth: "minimal"
+  modern_business: "light",
+  consulting_classic: "light",
+  executive_professional: "light",
+  strategy_growth: "light"
 };
 async function loadDesignSpecsFromKB(kb, type) {
   const typeConfig = kb.queryRequired(`presentation_types.${type}`);
@@ -3852,7 +4516,7 @@ async function loadDesignSpecsFromKB(kb, type) {
   const typography = typeConfig.value.typography;
   const primaryExperts = typeConfig.value.primary_experts;
   const colorPalette = typeConfig.value.color_palette || "consulting_classic";
-  const theme = PALETTE_TO_THEME[colorPalette] || "mckinsey";
+  const theme = PALETTE_TO_THEME[colorPalette] || "light";
   const scoringWeights = typeConfig.value.scoring_weights;
   let structure = "General presentation structure";
   if (primaryExperts.some((e) => e.includes("Minto") || e.includes("McKinsey"))) {
@@ -3896,6 +4560,80 @@ function getQualityCriteria(specs, type) {
     requireDataSources: specs.sourcesRequired
   };
 }
+function convertV1SlideToV2(slide) {
+  const data = slide.data;
+  const typeMap = {
+    title: "title",
+    title_impact: "title",
+    agenda: "bullets",
+    section_divider: "section",
+    thank_you: "thank_you",
+    single_statement: "statement",
+    big_idea: "statement",
+    big_number: "metrics",
+    quote: "statement",
+    star_moment: "statement",
+    call_to_action: "call_to_action",
+    three_points: "bullets",
+    bullet_points: "bullets",
+    two_column: "bullets",
+    comparison: "bullets",
+    metrics_grid: "metrics",
+    data_insight: "metrics",
+    problem_statement: "statement",
+    solution_overview: "bullets",
+    recommendation: "bullets",
+    next_steps: "bullets"
+  };
+  const v2Type = typeMap[slide.type] || "bullets";
+  const content = {};
+  if (data.bullets && data.bullets.length > 0) {
+    content.bullets = data.bullets;
+  }
+  if (data.metrics && data.metrics.length > 0) {
+    content.metrics = data.metrics.map((m) => {
+      const metric = {
+        value: String(m.value),
+        label: m.label
+      };
+      if (m.trend) {
+        metric.trend = m.trend;
+      }
+      return metric;
+    });
+  }
+  if (v2Type === "statement") {
+    const statement = data.keyMessage || data.quote || data.body || "";
+    if (statement) {
+      content.statement = statement;
+    }
+    if (data.attribution) {
+      content.subtext = data.attribution;
+    }
+  }
+  if (data.body && v2Type !== "statement") {
+    content.body = data.body;
+  }
+  if (data.source) {
+    content.source = data.source;
+  }
+  if (data.subtitle) {
+    content.subtext = data.subtitle;
+  }
+  const v2Slide = {
+    index: slide.index,
+    type: v2Type,
+    title: data.title || "",
+    content
+  };
+  if (slide.notes) {
+    v2Slide.notes = slide.notes;
+  }
+  return v2Slide;
+}
+function convertV1SlidesToV2(slides) {
+  return slides.map(convertV1SlideToV2);
+}
 var PresentationEngineV2 = class {
   options;
   kb = null;
@@ -3906,7 +4644,10 @@ var PresentationEngineV2 = class {
       imageApiKey: options.imageApiKey || process.env.GEMINI_API_KEY || process.env.OPENAI_API_KEY || "",
       minScore: options.minScore ?? 95,
       verbose: options.verbose ?? false,
-      maxRemediationAttempts: options.maxRemediationAttempts ?? 3
+      maxRemediationAttempts: options.maxRemediationAttempts ?? 3,
+      runVisualQA: options.runVisualQA ?? false,
+      useRichPipeline: options.useRichPipeline ?? true
+      // Default to V1's rich pipeline
     };
   }
   log(message) {
@@ -3938,8 +4679,21 @@ var PresentationEngineV2 = class {
     this.log(`  Words/slide: ${designSpecs.wordsPerSlide.min}-${designSpecs.wordsPerSlide.max}`);
     this.log(`  Experts: ${designSpecs.experts.slice(0, 2).join(", ")}...`);
     this.log("Step 3: Generating slides...");
-    const generator = createSlideGeneratorV2(presentationType);
-    let slides = generator.generate(markdown, title);
+    let slides;
+    if (this.options.useRichPipeline) {
+      this.log("  Using V1 rich pipeline...");
+      const contentAnalyzer = await initContentAnalyzer();
+      const slideGenerator = await initSlideGenerator();
+      const analysis = await contentAnalyzer.analyze(markdown, "markdown");
+      this.log(`  Content analysis: ${analysis.sections.length} sections, ${analysis.dataPoints.length} data points`);
+      const v1Slides = await slideGenerator.generate(analysis, presentationType);
+      this.log(`  V1 generated ${v1Slides.length} slides`);
+      slides = convertV1SlidesToV2(v1Slides);
+    } else {
+      this.log("  Using V2 minimalist pipeline...");
+      const generator = createSlideGeneratorV2(presentationType);
+      slides = generator.generate(markdown, title);
+    }
     this.log(`  Generated ${slides.length} slides`);
     if (!this.options.imageApiKey) {
       const shouldUseImages = this.shouldRecommendImages(slides, presentationType);
@@ -3989,12 +4743,31 @@ Summary: ${review.summary}`
       );
     }
     this.log("Step 7: Rendering output...");
-    const renderer = createRendererV2(presentationType, this.options.themeOverride);
+    const renderer = createRendererV2(presentationType, this.kb);
     const html = renderer.render(slides, title || "Presentation");
+    let visualQA;
+    if (this.options.runVisualQA) {
+      this.log("Step 8: Running Visual QA analysis...");
+      try {
+        const visualQAEngine = await initVisualQAEngine();
+        visualQA = await visualQAEngine.analyzeDeck(html, slides, presentationType);
+        await visualQAEngine.cleanup();
+        if (!visualQA.passed) {
+          warnings.push(`Visual QA detected issues: ${visualQA.summary}`);
+          this.log(`Visual QA: ${visualQA.overallScore}/100 - ${visualQA.deckIssues.length} issues found`);
+        } else {
+          this.log(`Visual QA PASSED: ${visualQA.overallScore}/100`);
+        }
+      } catch (error) {
+        const errMsg = error instanceof Error ? error.message : "Unknown error";
+        warnings.push(`Visual QA failed: ${errMsg}`);
+        this.log(`Visual QA error: ${errMsg}`);
+      }
+    }
     this.log(`
 SUCCESS: Generated ${slides.length} slides scoring ${review.overallScore}/100`);
     this.log(`Flow: ${review.flow}`);
-    return {
+    const result = {
       slides,
       html,
       presentationType,
@@ -4002,6 +4775,10 @@ SUCCESS: Generated ${slides.length} slides scoring ${review.overallScore}/100`);
       review,
       warnings
     };
+    if (visualQA) {
+      result.visualQA = visualQA;
+    }
+    return result;
   }
   /**
    * Detect presentation type from content analysis.
@@ -4096,7 +4873,7 @@ SUCCESS: Generated ${slides.length} slides scoring ${review.overallScore}/100`);
     const issues = [];
     const suggestions = [];
     let score = 100;
-    if (slide.type === "title" || slide.type === "thank_you") {
+    if (slide.type === "title" || slide.type === "thank_you" || slide.type === "section") {
       return {
         slideIndex: index,
         title: slide.title,
@@ -4154,7 +4931,7 @@ SUCCESS: Generated ${slides.length} slides scoring ${review.overallScore}/100`);
         score -= 10;
       }
     }
-    const hasContent = slide.content.bullets && slide.content.bullets.length > 0 || slide.content.table || slide.content.statement || slide.content.body;
+    const hasContent = slide.content.bullets && slide.content.bullets.length > 0 || slide.content.table || slide.content.metrics && slide.content.metrics.length > 0 || slide.content.statement || slide.content.body;
     if (!hasContent) {
       issues.push("Slide has no content");
       score -= 30;
@@ -4337,7 +5114,7 @@ async function generatePresentation(markdown, options) {
   const result = await engine.generate(markdown, options?.title);
   if (options?.outputPath) {
     const htmlPath = options.outputPath.replace(/\.[^.]+$/, "") + ".html";
-    writeFileSync2(htmlPath, result.html);
+    writeFileSync3(htmlPath, result.html);
     console.log(`
 Output: ${htmlPath}`);
   }
@@ -5081,12 +5858,12 @@ var SlideQualityReviewer = class {
     };
   }
 };
-var instance5 = null;
+var instance6 = null;
 function getSlideQualityReviewer() {
-  if (!instance5) {
-    instance5 = new SlideQualityReviewer();
+  if (!instance6) {
+    instance6 = new SlideQualityReviewer();
   }
-  return instance5;
+  return instance6;
 }
 async function initSlideQualityReviewer() {
   const reviewer = getSlideQualityReviewer();
@@ -5616,12 +6393,12 @@ var DeckQualityReviewer = class {
     return Math.max(0, 100 - deduction);
   }
 };
-var instance6 = null;
+var instance7 = null;
 function getDeckQualityReviewer() {
-  if (!instance6) {
-    instance6 = new DeckQualityReviewer();
+  if (!instance7) {
+    instance7 = new DeckQualityReviewer();
   }
-  return instance6;
+  return instance7;
 }
 async function initDeckQualityReviewer() {
   const reviewer = getDeckQualityReviewer();
@@ -5926,12 +6703,12 @@ var Remediator = class {
     return text.split(/\s+/).filter((w) => w.length > 0).length;
   }
 };
-var instance7 = null;
+var instance8 = null;
 function getRemediator() {
-  if (!instance7) {
-    instance7 = new Remediator();
+  if (!instance8) {
+    instance8 = new Remediator();
   }
-  return instance7;
+  return instance8;
 }
 async function initRemediator() {
   const remediator = getRemediator();
@@ -6903,12 +7680,12 @@ ${content}
     return html;
   }
 };
-var instance8 = null;
+var instance9 = null;
 function getRenderer() {
-  if (!instance8) {
-    instance8 = new Renderer();
+  if (!instance9) {
+    instance9 = new Renderer();
   }
-  return instance8;
+  return instance9;
 }
 async function initRenderer() {
   const renderer = getRenderer();
@@ -7778,7 +8555,7 @@ if (typeof process !== "undefined" && process.argv[1]?.includes("CodeQualityVali
 }
 
 // src/index.ts
-var VERSION = "4.1.0";
+var VERSION = "4.2.0";
 async function generate(options) {
   const {
     content,
@@ -7965,6 +8742,7 @@ export {
   SlideQualityReviewer,
   VERSION,
   VisualDesignSystem,
+  VisualQAEngine,
   createNanoBananaProvider,
   createPresentationEngineV2,
   createRendererV2,
@@ -7980,6 +8758,7 @@ export {
   getSlideGenerator,
   getSlideQualityReviewer,
   getVisualDesignSystem,
+  getVisualQAEngine,
   initContentAnalyzer,
   initDeckQualityReviewer,
   initKB,
@@ -7988,6 +8767,7 @@ export {
   initSlideGenerator,
   initSlideQualityReviewer,
   initVisualDesignSystem,
+  initVisualQAEngine,
   runCodeQualityCheck,
   validateCodeQuality
 };