slides-grab 1.0.0

package/scripts/html2pdf.js

@@ -0,0 +1,217 @@
+#!/usr/bin/env node
+
+import { readdir, writeFile } from 'node:fs/promises';
+import { join, resolve } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { chromium } from 'playwright';
+import { PDFDocument } from 'pdf-lib';
+
+const DEFAULT_OUTPUT = 'slides.pdf';
+const DEFAULT_SLIDES_DIR = 'slides';
+const SLIDE_FILE_PATTERN = /^slide-.*\.html$/i;
+const FALLBACK_SLIDE_SIZE = { width: 960, height: 540 };
+
+function printUsage() {
+  process.stdout.write(
+    [
+      'Usage: node scripts/html2pdf.js [options]',
+      '',
+      'Options:',
+      `  --output <path>  Output PDF path (default: ${DEFAULT_OUTPUT})`,
+      `  --slides-dir <path>  Slide directory (default: ${DEFAULT_SLIDES_DIR})`,
+      '  -h, --help       Show this help message',
+      '',
+      'Examples:',
+      '  node scripts/html2pdf.js',
+      '  node scripts/html2pdf.js --output dist/deck.pdf',
+    ].join('\n'),
+  );
+  process.stdout.write('\n');
+}
+
+function readOptionValue(args, index, optionName) {
+  const next = args[index + 1];
+  if (!next || next.startsWith('-')) {
+    throw new Error(`Missing value for ${optionName}.`);
+  }
+  return next;
+}
+
+function toSlideOrder(fileName) {
+  const match = fileName.match(/\d+/);
+  return match ? Number.parseInt(match[0], 10) : Number.POSITIVE_INFINITY;
+}
+
+export function sortSlideFiles(a, b) {
+  const orderA = toSlideOrder(a);
+  const orderB = toSlideOrder(b);
+  if (orderA !== orderB) return orderA - orderB;
+  return a.localeCompare(b);
+}
+
+export function parseCliArgs(args) {
+  const options = {
+    output: DEFAULT_OUTPUT,
+    slidesDir: DEFAULT_SLIDES_DIR,
+    help: false,
+  };
+
+  for (let i = 0; i < args.length; i += 1) {
+    const arg = args[i];
+
+    if (arg === '-h' || arg === '--help') {
+      options.help = true;
+      continue;
+    }
+
+    if (arg === '--output') {
+      options.output = readOptionValue(args, i, '--output');
+      i += 1;
+      continue;
+    }
+
+    if (arg.startsWith('--output=')) {
+      options.output = arg.slice('--output='.length);
+      continue;
+    }
+
+    if (arg === '--slides-dir') {
+      options.slidesDir = readOptionValue(args, i, '--slides-dir');
+      i += 1;
+      continue;
+    }
+
+    if (arg.startsWith('--slides-dir=')) {
+      options.slidesDir = arg.slice('--slides-dir='.length);
+      continue;
+    }
+
+    throw new Error(`Unknown option: ${arg}`);
+  }
+
+  if (typeof options.output !== 'string' || options.output.trim() === '') {
+    throw new Error('--output must be a non-empty string.');
+  }
+  if (typeof options.slidesDir !== 'string' || options.slidesDir.trim() === '') {
+    throw new Error('--slides-dir must be a non-empty string.');
+  }
+
+  options.output = options.output.trim();
+  options.slidesDir = options.slidesDir.trim();
+
+  return options;
+}
+
+export async function findSlideFiles(slidesDir = resolve(process.cwd(), DEFAULT_SLIDES_DIR)) {
+  const entries = await readdir(slidesDir, { withFileTypes: true });
+  return entries
+    .filter((entry) => entry.isFile() && SLIDE_FILE_PATTERN.test(entry.name))
+    .map((entry) => entry.name)
+    .sort(sortSlideFiles);
+}
+
+function normalizeDimension(value, fallback) {
+  if (!Number.isFinite(value) || value <= 0) {
+    return fallback;
+  }
+  return Math.max(1, Math.round(value));
+}
+
+export function buildPdfOptions(widthPx, heightPx) {
+  return {
+    width: `${normalizeDimension(widthPx, FALLBACK_SLIDE_SIZE.width)}px`,
+    height: `${normalizeDimension(heightPx, FALLBACK_SLIDE_SIZE.height)}px`,
+    printBackground: true,
+    pageRanges: '1',
+    margin: { top: '0px', right: '0px', bottom: '0px', left: '0px' },
+    preferCSSPageSize: false,
+  };
+}
+
+async function getSlideSize(page) {
+  const size = await page.evaluate(() => {
+    const body = document.body;
+    const rect = body.getBoundingClientRect();
+    const style = window.getComputedStyle(body);
+
+    return {
+      width: Number.parseFloat(style.width) || rect.width || 0,
+      height: Number.parseFloat(style.height) || rect.height || 0,
+    };
+  });
+
+  return {
+    width: normalizeDimension(size.width, FALLBACK_SLIDE_SIZE.width),
+    height: normalizeDimension(size.height, FALLBACK_SLIDE_SIZE.height),
+  };
+}
+
+async function renderSlideToPdf(page, slideFile, slidesDir) {
+  const slidePath = join(slidesDir, slideFile);
+  const slideUrl = pathToFileURL(slidePath).href;
+
+  await page.goto(slideUrl, { waitUntil: 'load' });
+  await page.evaluate(async () => {
+    if (document.fonts?.ready) {
+      await document.fonts.ready;
+    }
+  });
+
+  const size = await getSlideSize(page);
+  return page.pdf(buildPdfOptions(size.width, size.height));
+}
+
+export async function mergePdfBuffers(pdfBuffers) {
+  const outputPdf = await PDFDocument.create();
+
+  for (const pdfBuffer of pdfBuffers) {
+    const sourcePdf = await PDFDocument.load(pdfBuffer);
+    const pageIndices = sourcePdf.getPageIndices();
+    const pages = await outputPdf.copyPages(sourcePdf, pageIndices);
+    for (const page of pages) {
+      outputPdf.addPage(page);
+    }
+  }
+
+  return outputPdf.save();
+}
+
+async function main() {
+  const options = parseCliArgs(process.argv.slice(2));
+  if (options.help) {
+    printUsage();
+    return;
+  }
+
+  const slidesDir = resolve(process.cwd(), options.slidesDir);
+  const slideFiles = await findSlideFiles(slidesDir);
+  if (slideFiles.length === 0) {
+    throw new Error(`No slide-*.html files found in: ${slidesDir}`);
+  }
+
+  const browser = await chromium.launch({ headless: true });
+  const page = await browser.newPage();
+  const slidePdfs = [];
+
+  try {
+    for (const slideFile of slideFiles) {
+      const slidePdf = await renderSlideToPdf(page, slideFile, slidesDir);
+      slidePdfs.push(slidePdf);
+    }
+  } finally {
+    await browser.close();
+  }
+
+  const mergedPdf = await mergePdfBuffers(slidePdfs);
+  const outputPath = resolve(process.cwd(), options.output);
+  await writeFile(outputPath, mergedPdf);
+
+  process.stdout.write(`Generated PDF: ${outputPath}\n`);
+}
+
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
+  main().catch((error) => {
+    process.stderr.write(`${error instanceof Error ? error.message : String(error)}\n`);
+    process.exit(1);
+  });
+}

package/scripts/validate-slides.js

@@ -0,0 +1,416 @@
+#!/usr/bin/env node
+
+import { readdir } from 'node:fs/promises';
+import { join, resolve } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { chromium } from 'playwright';
+
+const FRAME_PT = { width: 720, height: 405 };
+const PT_TO_PX = 96 / 72;
+const FRAME_PX = {
+  width: FRAME_PT.width * PT_TO_PX,
+  height: FRAME_PT.height * PT_TO_PX
+};
+const SLIDE_FILE_PATTERN = /^slide-.*\.html$/i;
+const TEXT_SELECTOR = 'p,h1,h2,h3,h4,h5,h6,li';
+const TOLERANCE_PX = 0.5;
+const DEFAULT_SLIDES_DIR = 'slides';
+
+function toSlideOrder(fileName) {
+  const match = fileName.match(/\d+/);
+  return match ? Number.parseInt(match[0], 10) : Number.POSITIVE_INFINITY;
+}
+
+function sortSlideFiles(a, b) {
+  const orderA = toSlideOrder(a);
+  const orderB = toSlideOrder(b);
+  if (orderA !== orderB) return orderA - orderB;
+  return a.localeCompare(b);
+}
+
+function buildIssue(code, message, payload = {}) {
+  return { code, message, ...payload };
+}
+
+function summarizeSlides(slides) {
+  const summary = {
+    totalSlides: slides.length,
+    passedSlides: 0,
+    failedSlides: 0,
+    criticalIssues: 0,
+    warnings: 0
+  };
+
+  for (const slide of slides) {
+    if (slide.status === 'pass') {
+      summary.passedSlides += 1;
+    } else {
+      summary.failedSlides += 1;
+    }
+    summary.criticalIssues += slide.summary.criticalCount;
+    summary.warnings += slide.summary.warningCount;
+  }
+
+  return summary;
+}
+
+function printUsage() {
+  process.stdout.write(
+    [
+      'Usage: node scripts/validate-slides.js [options]',
+      '',
+      'Options:',
+      `  --slides-dir <path>  Slide directory (default: ${DEFAULT_SLIDES_DIR})`,
+      '  -h, --help           Show this help message',
+    ].join('\n'),
+  );
+  process.stdout.write('\n');
+}
+
+function readOptionValue(args, index, optionName) {
+  const next = args[index + 1];
+  if (!next || next.startsWith('-')) {
+    throw new Error(`Missing value for ${optionName}.`);
+  }
+  return next;
+}
+
+function parseCliArgs(args) {
+  const options = {
+    slidesDir: DEFAULT_SLIDES_DIR,
+    help: false,
+  };
+
+  for (let i = 0; i < args.length; i += 1) {
+    const arg = args[i];
+
+    if (arg === '-h' || arg === '--help') {
+      options.help = true;
+      continue;
+    }
+
+    if (arg === '--slides-dir') {
+      options.slidesDir = readOptionValue(args, i, '--slides-dir');
+      i += 1;
+      continue;
+    }
+
+    if (arg.startsWith('--slides-dir=')) {
+      options.slidesDir = arg.slice('--slides-dir='.length);
+      continue;
+    }
+
+    throw new Error(`Unknown option: ${arg}`);
+  }
+
+  if (typeof options.slidesDir !== 'string' || options.slidesDir.trim() === '') {
+    throw new Error('--slides-dir must be a non-empty string.');
+  }
+
+  options.slidesDir = options.slidesDir.trim();
+  return options;
+}
+
+async function findSlideFiles(slidesDir) {
+  const entries = await readdir(slidesDir, { withFileTypes: true });
+  return entries
+    .filter((entry) => entry.isFile() && SLIDE_FILE_PATTERN.test(entry.name))
+    .map((entry) => entry.name)
+    .sort(sortSlideFiles);
+}
+
+async function inspectSlide(page, fileName, slidesDir) {
+  const slidePath = join(slidesDir, fileName);
+  const slideUrl = pathToFileURL(slidePath).href;
+
+  await page.goto(slideUrl, { waitUntil: 'load' });
+  await page.evaluate(async () => {
+    if (document.fonts?.ready) {
+      await document.fonts.ready;
+    }
+  });
+
+  const inspection = await page.evaluate(
+    ({ framePx, textSelector, tolerancePx }) => {
+      const skipTags = new Set(['SCRIPT', 'STYLE', 'META', 'LINK', 'HEAD', 'TITLE', 'NOSCRIPT']);
+      const critical = [];
+      const warning = [];
+      const seenOverlaps = new Set();
+
+      const round = (value) => Number(value.toFixed(2));
+
+      const normalizeRect = (rect) => {
+        const left = rect.left ?? rect.x ?? 0;
+        const top = rect.top ?? rect.y ?? 0;
+        const width = rect.width ?? (rect.right - left) ?? 0;
+        const height = rect.height ?? (rect.bottom - top) ?? 0;
+        const right = rect.right ?? (left + width);
+        const bottom = rect.bottom ?? (top + height);
+        return {
+          x: round(left),
+          y: round(top),
+          width: round(width),
+          height: round(height),
+          left: round(left),
+          top: round(top),
+          right: round(right),
+          bottom: round(bottom)
+        };
+      };
+
+      const elementPath = (element) => {
+        if (!element || element.nodeType !== Node.ELEMENT_NODE) return '';
+        if (element === document.body) return 'body';
+
+        const parts = [];
+        let current = element;
+
+        while (current && current.nodeType === Node.ELEMENT_NODE && current !== document.body) {
+          let part = current.tagName.toLowerCase();
+          if (current.id) {
+            part += `#${current.id}`;
+            parts.unshift(part);
+            break;
+          }
+
+          const classNames = Array.from(current.classList).slice(0, 2);
+          if (classNames.length > 0) {
+            part += `.${classNames.join('.')}`;
+          }
+
+          if (current.parentElement) {
+            const siblingsOfSameTag = Array.from(current.parentElement.children)
+              .filter((sibling) => sibling.tagName === current.tagName);
+            if (siblingsOfSameTag.length > 1) {
+              const index = siblingsOfSameTag.indexOf(current);
+              part += `:nth-of-type(${index + 1})`;
+            }
+          }
+
+          parts.unshift(part);
+          current = current.parentElement;
+        }
+
+        return `body > ${parts.join(' > ')}`;
+      };
+
+      const isVisible = (element) => {
+        if (skipTags.has(element.tagName)) return false;
+        const style = window.getComputedStyle(element);
+        if (style.display === 'none' || style.visibility === 'hidden' || Number(style.opacity) === 0) {
+          return false;
+        }
+        const rect = element.getBoundingClientRect();
+        return rect.width > 0 && rect.height > 0;
+      };
+
+      const bodyRect = document.body.getBoundingClientRect();
+      const frameRect = {
+        left: bodyRect.left,
+        top: bodyRect.top,
+        right: bodyRect.left + (bodyRect.width || framePx.width),
+        bottom: bodyRect.top + (bodyRect.height || framePx.height),
+        width: bodyRect.width || framePx.width,
+        height: bodyRect.height || framePx.height
+      };
+
+      const allVisibleElements = Array.from(document.body.querySelectorAll('*')).filter(isVisible);
+      const visibleSet = new Set(allVisibleElements);
+
+      for (const element of allVisibleElements) {
+        const rect = element.getBoundingClientRect();
+        const outsideFrame = (
+          rect.left < frameRect.left - tolerancePx ||
+          rect.top < frameRect.top - tolerancePx ||
+          rect.right > frameRect.right + tolerancePx ||
+          rect.bottom > frameRect.bottom + tolerancePx
+        );
+
+        if (outsideFrame) {
+          critical.push({
+            code: 'overflow-outside-frame',
+            message: 'Element exceeds the 720pt x 405pt slide frame.',
+            element: elementPath(element),
+            bbox: normalizeRect(rect),
+            frame: normalizeRect(frameRect)
+          });
+        }
+      }
+
+      const textElements = Array.from(document.querySelectorAll(textSelector));
+      for (const element of textElements) {
+        if (!isVisible(element)) continue;
+        const content = (element.textContent || '').trim();
+        if (!content) continue;
+
+        const clipped = element.scrollHeight > element.clientHeight;
+        if (!clipped) continue;
+
+        critical.push({
+          code: 'text-clipped',
+          message: 'Text element is clipped because scrollHeight is larger than clientHeight.',
+          element: elementPath(element),
+          metrics: {
+            scrollHeight: element.scrollHeight,
+            clientHeight: element.clientHeight
+          },
+          bbox: normalizeRect(element.getBoundingClientRect())
+        });
+      }
+
+      const parents = [document.body, ...allVisibleElements];
+      for (const parent of parents) {
+        const children = Array.from(parent.children).filter((child) => visibleSet.has(child));
+        if (children.length < 2) continue;
+
+        for (let i = 0; i < children.length; i += 1) {
+          for (let j = i + 1; j < children.length; j += 1) {
+            const first = children[i];
+            const second = children[j];
+
+            const rectA = first.getBoundingClientRect();
+            const rectB = second.getBoundingClientRect();
+
+            const overlapWidth = Math.min(rectA.right, rectB.right) - Math.max(rectA.left, rectB.left);
+            const overlapHeight = Math.min(rectA.bottom, rectB.bottom) - Math.max(rectA.top, rectB.top);
+
+            if (overlapWidth <= tolerancePx || overlapHeight <= tolerancePx) continue;
+
+            const firstPath = elementPath(first);
+            const secondPath = elementPath(second);
+            const overlapKey = [firstPath, secondPath].sort().join('::');
+
+            if (seenOverlaps.has(overlapKey)) continue;
+            seenOverlaps.add(overlapKey);
+
+            warning.push({
+              code: 'sibling-overlap',
+              message: 'Sibling elements overlap in their bounding boxes.',
+              parent: elementPath(parent),
+              elements: [firstPath, secondPath],
+              intersection: {
+                x: round(Math.max(rectA.left, rectB.left)),
+                y: round(Math.max(rectA.top, rectB.top)),
+                width: round(overlapWidth),
+                height: round(overlapHeight)
+              },
+              boxes: [normalizeRect(rectA), normalizeRect(rectB)]
+            });
+          }
+        }
+      }
+
+      return {
+        critical,
+        warning
+      };
+    },
+    {
+      framePx: FRAME_PX,
+      textSelector: TEXT_SELECTOR,
+      tolerancePx: TOLERANCE_PX
+    }
+  );
+
+  const summary = {
+    criticalCount: inspection.critical.length,
+    warningCount: inspection.warning.length
+  };
+
+  return {
+    slide: fileName,
+    status: summary.criticalCount > 0 ? 'fail' : 'pass',
+    critical: inspection.critical,
+    warning: inspection.warning,
+    summary
+  };
+}
+
+async function main() {
+  const options = parseCliArgs(process.argv.slice(2));
+  if (options.help) {
+    printUsage();
+    return;
+  }
+
+  const slidesDir = resolve(process.cwd(), options.slidesDir);
+  const slideFiles = await findSlideFiles(slidesDir);
+  if (slideFiles.length === 0) {
+    throw new Error(`No slide-*.html files found in: ${slidesDir}`);
+  }
+
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1920, height: 1080 } });
+  const page = await context.newPage();
+
+  const slides = [];
+  try {
+    for (const slideFile of slideFiles) {
+      try {
+        const result = await inspectSlide(page, slideFile, slidesDir);
+        slides.push(result);
+      } catch (error) {
+        slides.push({
+          slide: slideFile,
+          status: 'fail',
+          critical: [
+            buildIssue(
+              'slide-validation-error',
+              'Slide validation failed before checks could complete.',
+              { detail: error instanceof Error ? error.message : String(error) }
+            )
+          ],
+          warning: [],
+          summary: {
+            criticalCount: 1,
+            warningCount: 0
+          }
+        });
+      }
+    }
+  } finally {
+    await browser.close();
+  }
+
+  const result = {
+    generatedAt: new Date().toISOString(),
+    frame: {
+      widthPt: FRAME_PT.width,
+      heightPt: FRAME_PT.height,
+      widthPx: FRAME_PX.width,
+      heightPx: FRAME_PX.height
+    },
+    slides,
+    summary: summarizeSlides(slides)
+  };
+
+  process.stdout.write(`${JSON.stringify(result, null, 2)}\n`);
+
+  if (result.summary.failedSlides > 0) {
+    process.exitCode = 1;
+  }
+}
+
+main().catch((error) => {
+  const failure = {
+    generatedAt: new Date().toISOString(),
+    frame: {
+      widthPt: FRAME_PT.width,
+      heightPt: FRAME_PT.height,
+      widthPx: FRAME_PX.width,
+      heightPx: FRAME_PX.height
+    },
+    slides: [],
+    summary: {
+      totalSlides: 0,
+      passedSlides: 0,
+      failedSlides: 0,
+      criticalIssues: 1,
+      warnings: 0
+    },
+    error: error instanceof Error ? error.message : String(error)
+  };
+
+  process.stdout.write(`${JSON.stringify(failure, null, 2)}\n`);
+  process.exit(1);
+});

package/skills/ppt-design-skill/SKILL.md

@@ -0,0 +1,38 @@
+---
+name: ppt-design-skill
+description: Stage 2 design skill for Codex. Generate and iterate slide-XX.html files in the selected slides workspace.
+metadata:
+  short-description: Build HTML slides and viewer for review loop
+---
+
+# PPT Design Skill (Codex)
+
+Use this after `slide-outline.md` is approved.
+
+## Goal
+Generate high-quality `slide-XX.html` files in the selected slides workspace (`slides/` by default) and support revision loops.
+
+## Inputs
+- Approved `slide-outline.md`
+- Theme/layout preferences
+- Requested edits per slide
+
+## Outputs
+- `<slides-dir>/slide-01.html ... slide-XX.html`
+- Updated `<slides-dir>/viewer.html` via build script
+
+## Workflow
+1. Read approved `slide-outline.md`.
+2. Generate slide HTML files with 2-digit numbering in selected `--slides-dir`.
+3. Run `node scripts/build-viewer.js --slides-dir <path>` after generation or edits.
+4. Iterate on user feedback by editing only requested slide files.
+5. Keep revising until user approves conversion stage.
+
+## Rules
+- Keep slide size 720pt x 405pt.
+- Keep semantic text tags (`p`, `h1-h6`, `ul`, `ol`, `li`).
+- Do not start conversion before approval.
+
+## Reference
+For full constraints and style system, follow:
+- `.claude/skills/design-skill/SKILL.md`

package/skills/ppt-plan-skill/SKILL.md

@@ -0,0 +1,37 @@
+---
+name: ppt-plan-skill
+description: Stage 1 planning skill for Codex. Build and iterate slide-outline.md until explicit user approval.
+metadata:
+  short-description: Create and revise slide outline before design stage
+---
+
+# PPT Plan Skill (Codex)
+
+Use this when the user asks to start a new presentation from scratch.
+
+## Goal
+Produce an approved `slide-outline.md` before any slide HTML generation.
+
+## Inputs
+- Topic and intent
+- Audience
+- Tone and constraints
+- Optional research findings
+
+## Output
+- `slide-outline.md`
+
+## Workflow
+1. Analyze user goal and audience.
+2. Create or revise `slide-outline.md` with ordered slides and key messages.
+3. Present a concise summary to user.
+4. Repeat revisions until explicit approval.
+
+## Rules
+- Do not generate slide HTML (`<slides-dir>/slide-*.html`) in this stage.
+- Keep scope to structure and narrative.
+- Ask for approval before moving to design.
+
+## Reference
+If needed, use rules from:
+- `.claude/skills/plan-skill/SKILL.md`