@deckio/deck-engine 0.1.0

package/scripts/capture-screen.mjs

@@ -0,0 +1,127 @@
+#!/usr/bin/env node
+/**
+ * Capture a screenshot of the deck app via headless Edge.
+ *
+ * Usage:
+ *   node scripts/capture-screen.mjs                                # project + port from state.md
+ *   node scripts/capture-screen.mjs --project dev-plan             # specific project
+ *   node scripts/capture-screen.mjs --slide 3                      # specific slide (1-based)
+ *   node scripts/capture-screen.mjs --project dev-plan --slide 2 --label "cover-check"
+ */
+import puppeteer from 'puppeteer-core'
+import { existsSync, mkdirSync, readFileSync } from 'fs'
+import path from 'path'
+
+// Resolve browser path per-platform; prefer Edge, fall back to Chrome
+function findBrowser() {
+  const platform = process.platform
+  if (platform === 'win32') {
+    return 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe'
+  }
+  if (platform === 'darwin') {
+    const edge = '/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge'
+    const chrome = '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'
+    return existsSync(edge) ? edge : chrome
+  }
+  // Linux — common Chromium / Chrome / Edge paths
+  for (const p of ['/usr/bin/microsoft-edge', '/usr/bin/google-chrome', '/usr/bin/chromium-browser', '/usr/bin/chromium']) {
+    if (existsSync(p)) return p
+  }
+  return 'google-chrome'
+}
+const BROWSER_PATH = findBrowser()
+const sleep = ms => new Promise(r => setTimeout(r, ms))
+const args = process.argv.slice(2)
+const arg = (name, fb) => {
+  const i = args.indexOf(`--${name}`)
+  return i !== -1 && args[i + 1] ? args[i + 1] : fb
+}
+const numArg = (name, fb) => {
+  const v = arg(name, null)
+  return v != null ? Number(v) : fb
+}
+
+const root = path.resolve(arg('root', process.cwd()))
+const eyesDir = path.join(root, '.github', 'eyes')
+const stateFile = path.join(root, '.github', 'memory', 'state.md')
+
+const state = readState()
+const PROJECT = arg('project', state.project || null)
+const PORT = arg('port', state.port || '5175')
+const SLIDE = numArg('slide', null)
+const LABEL = arg('label', null)
+const URL = `http://localhost:${PORT}/#/${PROJECT}`
+
+if (!PROJECT) {
+  console.error('❌ No project. Use --project <id> or set it in .github/memory/state.md')
+  process.exit(1)
+}
+
+function readState() {
+  if (!existsSync(stateFile)) return {}
+  const c = readFileSync(stateFile, 'utf-8')
+  return {
+    project: c.match(/^project:\s*(.+)$/m)?.[1]?.trim() || '',
+    port: c.match(/^port:\s*(\d+)$/m)?.[1]?.trim() || '5175',
+  }
+}
+
+async function main() {
+  mkdirSync(eyesDir, { recursive: true })
+  console.log(`👁️  ${PROJECT}  ${URL}${SLIDE ? `  slide ${SLIDE}` : ''}`)
+
+  try {
+    const response = await fetch(`http://localhost:${PORT}`, { signal: AbortSignal.timeout(3000) })
+    if (!response.ok) throw new Error('Dev server unavailable')
+  } catch {
+    console.error(`❌ Dev server not reachable on port ${PORT}`)
+    process.exit(1)
+  }
+
+  const browser = await puppeteer.launch({
+    executablePath: BROWSER_PATH,
+    headless: 'new',
+    args: ['--no-sandbox', '--disable-gpu', '--disable-dev-shm-usage'],
+    defaultViewport: { width: 1920, height: 1080, deviceScaleFactor: 2 },
+  })
+
+  const page = await browser.newPage()
+  await page.goto(URL, { waitUntil: 'domcontentloaded', timeout: 15000 })
+  await page.waitForFunction(() => document.querySelectorAll('.slide').length > 0, { timeout: 10000 })
+  await sleep(1500)
+
+  if (SLIDE && SLIDE > 1) {
+    const total = await page.evaluate(() => document.querySelectorAll('.slide').length)
+    for (let i = 0; i < total; i++) {
+      await page.keyboard.press('ArrowLeft')
+      await sleep(50)
+    }
+    for (let i = 0; i < SLIDE - 1; i++) {
+      await page.keyboard.press('ArrowRight')
+      await sleep(100)
+    }
+    await sleep(800)
+  }
+
+  await page.evaluate(() => {
+    document.querySelectorAll('[class*="nav"],[class*="Nav"],[class*="progress"],[class*="Progress"],[class*="hint"],[class*="Hint"],[class*="bottomBar"],[class*="BottomBar"]')
+      .forEach(el => {
+        if (el.tagName !== 'BODY' && el.tagName !== 'HTML') el.style.display = 'none'
+      })
+  })
+  await sleep(300)
+
+  const ts = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19)
+  const name = [PROJECT, SLIDE && `slide${SLIDE}`, LABEL, ts].filter(Boolean).join('-') + '.png'
+  const filepath = path.join(eyesDir, name)
+  await page.screenshot({ path: filepath, type: 'png' })
+  await browser.close()
+
+  const rel = path.relative(root, filepath).replace(/\\/g, '/')
+  console.log(`📸 ${rel}`)
+}
+
+main().catch(err => {
+  console.error('❌', err?.message || err)
+  process.exit(1)
+})

package/scripts/export-pdf.mjs

@@ -0,0 +1,287 @@
+#!/usr/bin/env node
+/**
+ * Export slides to PDF using Puppeteer + embedded Vite dev server.
+ *
+ * For project exports (--project), the script spins up its own Vite dev
+ * server so no separate `npm run dev` is needed.
+ *
+ * Usage:
+ *   node scripts/export-pdf.mjs --project dev-plan
+ *   node scripts/export-pdf.mjs                              # ghcp slides (needs running dev server)
+ *   node scripts/export-pdf.mjs --customer --customer-name Rabobank --from 12 --to 19
+ *   node scripts/export-pdf.mjs --internal --from 2 --to 10
+ */
+import puppeteer from 'puppeteer'
+import { existsSync, mkdirSync } from 'fs'
+import path from 'path'
+import { createServer } from 'vite'
+
+const args = process.argv.slice(2)
+const flag = (name) => args.includes(`--${name}`)
+const getArg = (name, fallback) => {
+  const idx = args.indexOf(`--${name}`)
+  return idx !== -1 && args[idx + 1] ? Number(args[idx + 1]) : fallback
+}
+const getStringArg = (name, fallback) => {
+  const idx = args.indexOf(`--${name}`)
+  return idx !== -1 && args[idx + 1] ? args[idx + 1] : fallback
+}
+
+const ROOT = path.resolve(getStringArg('root', process.cwd()))
+const outDir = path.resolve(ROOT, getStringArg('out-dir', 'exports'))
+const viteConfigPath = path.resolve(ROOT, getStringArg('config', 'vite.config.js'))
+
+const PORT = getArg('port', 5173)
+const FROM = getArg('from', null)
+const TO = getArg('to', null)
+const CUSTOMER_NAME = getStringArg('customer-name', null)
+const PROJECT = getStringArg('project', null)
+const isCustomer = flag('customer')
+const slug = (s) => s.toLowerCase().replace(/\s+/g, '-')
+const outFile = PROJECT
+  ? (CUSTOMER_NAME
+    ? `${slug(CUSTOMER_NAME)}-slides.pdf`
+    : `${PROJECT}-slides.pdf`)
+  : isCustomer
+    ? `${slug(CUSTOMER_NAME || 'customer')}-slides.pdf`
+    : flag('internal') ? 'internal-slides.pdf' : 'slides.pdf'
+
+if (!existsSync(outDir)) mkdirSync(outDir, { recursive: true })
+
+async function hideNav(page) {
+  await page.evaluate(() => {
+    document.querySelectorAll(
+      '[class*="nav"], [class*="Nav"], [class*="progress"], ' +
+      '[class*="Progress"], [class*="hint"], [class*="Hint"]'
+    ).forEach(el => {
+      if (el.tagName !== 'BODY' && el.tagName !== 'HTML') {
+        el.style.display = 'none'
+      }
+    })
+  })
+}
+
+const sleep = ms => new Promise(r => setTimeout(r, ms))
+
+async function goToSlide(page, targetIdx, totalSlides) {
+  for (let i = 0; i < totalSlides; i++) {
+    await page.keyboard.press('ArrowLeft')
+    await sleep(50)
+  }
+  for (let i = 0; i < targetIdx; i++) {
+    await page.keyboard.press('ArrowRight')
+    await sleep(100)
+  }
+  await sleep(800)
+}
+
+async function captureSlides(page, fromIdx, toIdx, totalSlides) {
+  await goToSlide(page, fromIdx, totalSlides)
+  const shots = []
+  for (let i = fromIdx; i <= toIdx; i++) {
+    console.log(`  📸 Slide ${i + 1}/${totalSlides}`)
+    await sleep(400)
+    shots.push(await page.screenshot({ type: 'png', encoding: 'binary' }))
+    if (i < toIdx) {
+      await page.keyboard.press('ArrowRight')
+      await sleep(700)
+    }
+  }
+  return shots
+}
+
+async function buildPDF(browser, screenshots, pdfPath) {
+  const pdfPage = await browser.newPage()
+  await pdfPage.setViewport({ width: 1920, height: 1080 })
+
+  const imgTags = screenshots.map(buf => {
+    const b64 = Buffer.from(buf).toString('base64')
+    return `<div class="page"><img src="data:image/png;base64,${b64}" /></div>`
+  }).join('\n')
+
+  await pdfPage.setContent(`<!DOCTYPE html>
+<html><head><style>
+  *{margin:0;padding:0;box-sizing:border-box}
+  html,body{width:1920px;overflow:hidden}
+  @page{size:1920px 1080px;margin:0}
+  .page{width:1920px;height:1080px;page-break-after:always;page-break-inside:avoid;overflow:hidden}
+  .page:last-child{page-break-after:avoid}
+  .page img{display:block;width:1920px;height:1080px;object-fit:fill}
+</style></head><body>${imgTags}</body></html>`, { waitUntil: 'load' })
+
+  await pdfPage.pdf({
+    path: pdfPath,
+    width: '1920px',
+    height: '1080px',
+    printBackground: true,
+    preferCSSPageSize: true,
+    margin: { top: '0px', right: '0px', bottom: '0px', left: '0px' },
+  })
+  await pdfPage.close()
+}
+
+async function exportProjectPDF() {
+  console.log(`\n📂 Exporting project: ${PROJECT}`)
+
+  const server = await createServer({
+    root: ROOT,
+    configFile: viteConfigPath,
+    server: { port: 0, strictPort: false, host: '127.0.0.1' },
+    logLevel: 'silent',
+  })
+  await server.listen()
+  const addr = server.httpServer.address()
+  const base = `http://127.0.0.1:${addr.port}`
+  console.log(`  Vite server listening on ${base}`)
+
+  await sleep(2000)
+
+  const browser = await puppeteer.launch({
+    headless: true,
+    args: ['--no-sandbox', '--disable-setuid-sandbox'],
+  })
+  const page = await browser.newPage()
+  await page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 2 })
+
+  const url = `${base}/#/${PROJECT}`
+  console.log(`⏳ Loading ${url}`)
+  let loaded = false
+  for (let attempt = 1; attempt <= 3; attempt++) {
+    try {
+      await page.goto(url, { waitUntil: 'networkidle0', timeout: 30000 })
+      loaded = true
+      break
+    } catch (err) {
+      console.log(`  Attempt ${attempt}/3 failed: ${err.message}`)
+      await sleep(2000)
+    }
+  }
+  if (!loaded) throw new Error('Could not load the Vite dev server after 3 attempts')
+  await page.goto(url, { waitUntil: 'networkidle0', timeout: 30000 })
+
+  await page.waitForFunction(
+    () => document.querySelectorAll('.slide').length > 0,
+    { timeout: 15000 }
+  )
+  await sleep(1500)
+
+  await hideNav(page)
+
+  if (CUSTOMER_NAME) {
+    console.log(`👤 Selecting customer: ${CUSTOMER_NAME}`)
+    const clicked = await page.evaluate(() => {
+      const btn = [...document.querySelectorAll('button')].find(b => b.textContent.includes('Customer Facing'))
+      if (btn) {
+        btn.click()
+        return true
+      }
+      return false
+    })
+    if (!clicked) {
+      console.error('❌ "Customer Facing" button not found')
+      await browser.close()
+      await server.close()
+      process.exit(1)
+    }
+    await sleep(800)
+
+    const picked = await page.evaluate(name => {
+      const btn = [...document.querySelectorAll('button')].find(b => b.textContent.trim().includes(name))
+      if (btn) {
+        btn.click()
+        return true
+      }
+      return false
+    }, CUSTOMER_NAME)
+    if (!picked) {
+      console.error(`❌ Customer "${CUSTOMER_NAME}" not found`)
+      await browser.close()
+      await server.close()
+      process.exit(1)
+    }
+    await sleep(1000)
+    console.log('✅ Customer selected')
+    await hideNav(page)
+  }
+
+  const totalSlides = await page.evaluate(() => document.querySelectorAll('.slide').length)
+  const fromIdx = FROM ? FROM - 1 : 0
+  const toIdx = TO ? TO - 1 : totalSlides - 1
+  console.log(`📊 ${totalSlides} slides — exporting ${fromIdx + 1}–${toIdx + 1}`)
+
+  const screenshots = await captureSlides(page, fromIdx, toIdx, totalSlides)
+
+  const pdfPath = path.join(outDir, outFile)
+  await buildPDF(browser, screenshots, pdfPath)
+
+  await browser.close()
+  await server.close()
+  console.log(`\n✅ PDF saved to ${pdfPath}`)
+}
+
+async function exportDevServerPDF() {
+  const BASE = `http://localhost:${PORT}`
+  console.log(`\n⏳ Connecting to dev server at ${BASE}`)
+
+  const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox'] })
+  const page = await browser.newPage()
+  await page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 2 })
+
+  await page.goto(`${BASE}/#/ghcp`, { waitUntil: 'networkidle0', timeout: 30000 })
+  await page.waitForSelector('.slide.active', { timeout: 10000 })
+
+  if (isCustomer && CUSTOMER_NAME) {
+    console.log(`👤 Selecting customer: ${CUSTOMER_NAME}`)
+    const clicked = await page.evaluate(() => {
+      const btn = [...document.querySelectorAll('button')].find(b => b.textContent.includes('Customer Facing'))
+      if (btn) {
+        btn.click()
+        return true
+      }
+      return false
+    })
+    if (!clicked) {
+      console.error('❌ "Customer Facing" button not found')
+      await browser.close()
+      process.exit(1)
+    }
+    await sleep(800)
+
+    const picked = await page.evaluate(name => {
+      const btn = [...document.querySelectorAll('button')].find(b => b.textContent.trim().includes(name))
+      if (btn) {
+        btn.click()
+        return true
+      }
+      return false
+    }, CUSTOMER_NAME)
+    if (!picked) {
+      console.error(`❌ Customer "${CUSTOMER_NAME}" not found`)
+      await browser.close()
+      process.exit(1)
+    }
+    await sleep(1000)
+    console.log('✅ Customer selected')
+  }
+
+  await hideNav(page)
+
+  const totalSlides = await page.evaluate(() => document.querySelectorAll('.slide').length)
+  const fromIdx = FROM ? FROM - 1 : 0
+  const toIdx = TO ? TO - 1 : totalSlides - 1
+  console.log(`📊 ${totalSlides} slides — exporting ${fromIdx + 1}–${toIdx + 1}`)
+
+  const screenshots = await captureSlides(page, fromIdx, toIdx, totalSlides)
+
+  const pdfPath = path.join(outDir, outFile)
+  await buildPDF(browser, screenshots, pdfPath)
+
+  await browser.close()
+  console.log(`\n✅ PDF saved to ${pdfPath}`)
+}
+
+const run = PROJECT ? exportProjectPDF : exportDevServerPDF
+run().catch(err => {
+  console.error('❌ Export failed:', err.message)
+  process.exit(1)
+})

package/scripts/generate-image.mjs

@@ -0,0 +1,110 @@
+#!/usr/bin/env node
+/**
+ * Generate an image using OpenAI chatgpt-image-latest (Image API) and save
+ * it for use in slides.
+ *
+ * Requires OPENAI_API_KEY environment variable.
+ *
+ * Usage:
+ *   node scripts/generate-image.mjs --prompt "a bridge icon" --name bridge-icon
+ *   node scripts/generate-image.mjs --prompt "..." --name hero --size 1536x1024
+ *   node scripts/generate-image.mjs --prompt "..." --name icon --quality high
+ *   node scripts/generate-image.mjs --prompt "..." --name x --model gpt-image-1.5
+ */
+import { writeFileSync, mkdirSync, readFileSync, existsSync } from 'fs'
+import path from 'path'
+
+const root = process.cwd()
+const args = process.argv.slice(2)
+const arg = (name, fb) => {
+  const i = args.indexOf(`--${name}`)
+  return i !== -1 && args[i + 1] ? args[i + 1] : fb
+}
+
+const outputDir = arg('out-dir', path.join('src', 'data', 'generated'))
+const imagesDir = path.resolve(root, outputDir)
+const envPath = path.join(root, '.env')
+
+if (existsSync(envPath)) {
+  for (const line of readFileSync(envPath, 'utf-8').split(/\r?\n/)) {
+    const m = line.match(/^([A-Z_][A-Z0-9_]*)=(.+)$/)
+    if (m) process.env[m[1]] = m[2].trim()
+  }
+}
+
+const PROMPT = arg('prompt', null)
+const NAME = arg('name', null)
+const SIZE = arg('size', '1024x1024')
+const QUALITY = arg('quality', 'auto')
+const MODEL = arg('model', 'chatgpt-image-latest')
+
+const API_KEY = process.env.OPENAI_API_KEY
+if (!API_KEY) {
+  console.error('❌ Set OPENAI_API_KEY environment variable')
+  process.exit(1)
+}
+if (!PROMPT) {
+  console.error('❌ --prompt is required')
+  process.exit(1)
+}
+if (!NAME) {
+  console.error('❌ --name is required (used as filename)')
+  process.exit(1)
+}
+
+async function main() {
+  mkdirSync(imagesDir, { recursive: true })
+  console.log(`🎨 Generating image: "${PROMPT}"`)
+  console.log(`   Model: ${MODEL}  Size: ${SIZE}  Quality: ${QUALITY}`)
+
+  const body = {
+    model: MODEL,
+    prompt: PROMPT,
+    n: 1,
+    size: SIZE,
+    quality: QUALITY,
+  }
+
+  const res = await fetch('https://api.openai.com/v1/images/generations', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${API_KEY}`,
+    },
+    body: JSON.stringify(body),
+  })
+
+  if (!res.ok) {
+    const err = await res.text()
+    console.error(`❌ API error (${res.status}): ${err}`)
+    process.exit(1)
+  }
+
+  const data = await res.json()
+  const imageB64 = data.data?.[0]?.b64_json || null
+  const imageUrl = data.data?.[0]?.url || null
+
+  if (!imageB64 && !imageUrl) {
+    console.error('❌ Could not extract image from response.')
+    console.error(JSON.stringify(data).slice(0, 2000))
+    process.exit(1)
+  }
+
+  const filepath = path.join(imagesDir, `${NAME}.png`)
+  let imgBuffer
+  if (imageB64) {
+    imgBuffer = Buffer.from(imageB64, 'base64')
+  } else {
+    const dl = await fetch(imageUrl)
+    imgBuffer = Buffer.from(await dl.arrayBuffer())
+  }
+  writeFileSync(filepath, imgBuffer)
+  console.log(`📸 Saved: ${path.relative(root, filepath)}`)
+  console.log(`\n📦 Import in a slide:`)
+  console.log(`   import ${NAME}Img from '../../data/generated/${NAME}.png'`)
+}
+
+main().catch(err => {
+  console.error('❌', err?.message || err)
+  process.exit(1)
+})