@deckio/deck-engine 1.7.6 → 1.7.8

package/instructions/deck-project.instructions.md

@@ -1,34 +1,34 @@
----
-description: "Use when working in any deck-project folder. Defines the role, scope, and guardrails for Copilot in deck presentation projects."
-applyTo: "deck-project-*/**"
----
-
-# Deck Project Scope
-
-You are a **slide builder** for a presentation deck built with `@deckio/deck-engine`.
-
-## Your role
-
-- Create new slide components (JSX + CSS module pairs)
-- Edit existing slides
-- Manage data files in `src/data/`
-- Register / reorder slides in `deck.config.js`
-
-## Out of scope — do NOT modify
-
-- `App.jsx`, `main.jsx` — these are generic, engine-driven, identical across projects
-- `vite.config.js`, `package.json`, `index.html` — project scaffolding, don't touch
-- Anything in `node_modules/` or the deck-engine package itself
-
-## Project architecture
-
-- `deck.config.js` — single source of truth: metadata + slide array
-- `src/slides/` — one `PascalCase.jsx` + matching `.module.css` per slide
-- `src/data/` — ESM exports for logos, speakers, opportunity data, governance
-- The engine (`@deckio/deck-engine`) provides: `Slide`, `BottomBar`, `Navigation`, `SlideProvider`, `useSlides`, `GenericThankYouSlide`
-
-## Data conventions
-
-- Always use ESM imports for images: `import logo from '../data/logos/acme.png'`
-- Export data as named exports or default objects
-- Keep data files focused — one concern per file
+---
+description: "Use when working in any deck-project folder. Defines the role, scope, and guardrails for Copilot in deck presentation projects."
+applyTo: "deck-project-*/**"
+---
+
+# Deck Project Scope
+
+You are a **slide builder** for a presentation deck built with `@deckio/deck-engine`.
+
+## Your role
+
+- Create new slide components (JSX + CSS module pairs)
+- Edit existing slides
+- Manage data files in `src/data/`
+- Register / reorder slides in `deck.config.js`
+
+## Out of scope — do NOT modify
+
+- `App.jsx`, `main.jsx` — these are generic, engine-driven, identical across projects
+- `vite.config.js`, `package.json`, `index.html` — project scaffolding, don't touch
+- Anything in `node_modules/` or the deck-engine package itself
+
+## Project architecture
+
+- `deck.config.js` — single source of truth: metadata + slide array
+- `src/slides/` — one `PascalCase.jsx` + matching `.module.css` per slide
+- `src/data/` — ESM exports for logos, speakers, opportunity data, governance
+- The engine (`@deckio/deck-engine`) provides: `Slide`, `BottomBar`, `Navigation`, `SlideProvider`, `useSlides`, `GenericThankYouSlide`
+
+## Data conventions
+
+- Always use ESM imports for images: `import logo from '../data/logos/acme.png'`
+- Export data as named exports or default objects
+- Keep data files focused — one concern per file

package/instructions/slide-css.instructions.md

@@ -1,91 +1,91 @@
----
-description: "Use when creating or editing slide CSS modules in a deck project. Enforces required properties, orb positioning, and theme variables."
-applyTo: "**/slides/**/*.module.css"
----
-
-# Slide CSS Module Conventions
-
-## Required root class
-
-```css
-.mySlide {
-  background: var(--bg-deep);
-  flex-direction: column;
-  padding: 0 0 44px 0;        /* reserve BottomBar height */
-}
-```
-
-Add `justify-content: center` for cover or thank-you slides.
-
-## Orb positioning recipe
-
-```css
-.orb1 {
-  width: 420px; height: 420px;
-  top: -100px; right: -60px;
-  background: radial-gradient(circle at 40% 40%, var(--accent), var(--blue-glow) 50%, transparent 70%);
-}
-.orb2 {
-  width: 320px; height: 320px;
-  bottom: -40px; right: 100px;
-  background: radial-gradient(circle at 50% 50%, var(--purple-deep), rgba(110,64,201,0.25) 60%, transparent 75%);
-}
-```
-
-## Body wrapper
-
-```css
-.body {
-  position: relative;
-  z-index: 10;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  flex: 1;
-  min-height: 0;
-}
-```
-
-## Theme variables (always use these, never hard-code colors)
-
-| Variable | Value |
-|----------|-------|
-| `--bg-deep` | `#080b10` |
-| `--surface` | `#161b22` |
-| `--border` | `#30363d` |
-| `--text` | `#e6edf3` |
-| `--text-muted` | `#8b949e` |
-| `--accent` | project-specific |
-| `--blue-glow` | `#1f6feb` |
-| `--purple` | `#bc8cff` |
-| `--purple-deep` | `#6e40c9` |
-| `--pink` | `#f778ba` |
-| `--cyan` | `#56d4dd` |
-| `--green` | `#3fb950` |
-| `--orange` | `#d29922` |
-
-## Global classes (no import needed)
-
-`accent-bar`, `orb`, `grid-dots`, `content-frame`, `content-gutter`
-
-## Card pattern
-
-```css
-.card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 16px;
-  padding: 24px;
-}
-```
-
-## Typography
-
-| Element | Size | Weight | Spacing |
-|---------|------|--------|---------|
-| h1 | `clamp(42px, 5vw, 72px)` | 900 | `-2px` |
-| h2 | `clamp(28px, 3.2vw, 36px)` | 700 | `-0.8px` |
-| h3 | `16px–20px` | 700 | `-0.3px` |
-| Subtitle | `17px` | 300–400 | — |
-| Body | `13px–14px` | 400 | — |
-| Badge | `10px–11px` | 600–700 | `1.5px` |
+---
+description: "Use when creating or editing slide CSS modules in a deck project. Enforces required properties, orb positioning, and theme variables."
+applyTo: "**/slides/**/*.module.css"
+---
+
+# Slide CSS Module Conventions
+
+## Required root class
+
+```css
+.mySlide {
+  background: var(--bg-deep);
+  flex-direction: column;
+  padding: 0 0 44px 0;        /* reserve BottomBar height */
+}
+```
+
+Add `justify-content: center` for cover or thank-you slides.
+
+## Orb positioning recipe
+
+```css
+.orb1 {
+  width: 420px; height: 420px;
+  top: -100px; right: -60px;
+  background: radial-gradient(circle at 40% 40%, var(--accent), var(--blue-glow) 50%, transparent 70%);
+}
+.orb2 {
+  width: 320px; height: 320px;
+  bottom: -40px; right: 100px;
+  background: radial-gradient(circle at 50% 50%, var(--purple-deep), rgba(110,64,201,0.25) 60%, transparent 75%);
+}
+```
+
+## Body wrapper
+
+```css
+.body {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1;
+  min-height: 0;
+}
+```
+
+## Theme variables (always use these, never hard-code colors)
+
+| Variable | Value |
+|----------|-------|
+| `--bg-deep` | `#080b10` |
+| `--surface` | `#161b22` |
+| `--border` | `#30363d` |
+| `--text` | `#e6edf3` |
+| `--text-muted` | `#8b949e` |
+| `--accent` | project-specific |
+| `--blue-glow` | `#1f6feb` |
+| `--purple` | `#bc8cff` |
+| `--purple-deep` | `#6e40c9` |
+| `--pink` | `#f778ba` |
+| `--cyan` | `#56d4dd` |
+| `--green` | `#3fb950` |
+| `--orange` | `#d29922` |
+
+## Global classes (no import needed)
+
+`accent-bar`, `orb`, `grid-dots`, `content-frame`, `content-gutter`
+
+## Card pattern
+
+```css
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 24px;
+}
+```
+
+## Typography
+
+| Element | Size | Weight | Spacing |
+|---------|------|--------|---------|
+| h1 | `clamp(42px, 5vw, 72px)` | 900 | `-2px` |
+| h2 | `clamp(28px, 3.2vw, 36px)` | 700 | `-0.8px` |
+| h3 | `16px–20px` | 700 | `-0.3px` |
+| Subtitle | `17px` | 300–400 | — |
+| Body | `13px–14px` | 400 | — |
+| Badge | `10px–11px` | 600–700 | `1.5px` |

package/instructions/slide-jsx.instructions.md

@@ -1,34 +1,34 @@
----
-description: "Use when creating, editing, or reviewing slide JSX components in a deck project. Enforces the mandatory slide skeleton, imports, and anti-patterns."
-applyTo: "**/slides/**/*.jsx"
----
-
-# Slide JSX Conventions
-
-## Imports
-
-```jsx
-import { BottomBar, Slide } from '@deckio/deck-engine'
-import styles from './MySlide.module.css'
-```
-
-## Mandatory skeleton (in order inside `<Slide>`)
-
-1. `<div className="accent-bar" />` — always first
-2. 2–4 orbs: `<div className={\`orb ${styles.orbN}\`} />`
-3. Content wrapper: `<div className={\`${styles.body} content-frame content-gutter\`}>` — all visible content here
-4. `<BottomBar text="..." />` — always last child
-
-## Props
-
-Every slide receives `{ index, project, title, subtitle }`. Pass `index` to `<Slide>`.
-
-## Available engine exports
-
-`Slide`, `BottomBar`, `Navigation`, `SlideProvider`, `useSlides`, `GenericThankYouSlide`
-
-## Anti-patterns
-
-- Never omit `accent-bar`, `content-frame content-gutter`, or `BottomBar`
-- Never use string paths for images — always `import logo from '../data/...'`
-- Never hardcode slide indices — use `useSlides().goTo()` for navigation
+---
+description: "Use when creating, editing, or reviewing slide JSX components in a deck project. Enforces the mandatory slide skeleton, imports, and anti-patterns."
+applyTo: "**/slides/**/*.jsx"
+---
+
+# Slide JSX Conventions
+
+## Imports
+
+```jsx
+import { BottomBar, Slide } from '@deckio/deck-engine'
+import styles from './MySlide.module.css'
+```
+
+## Mandatory skeleton (in order inside `<Slide>`)
+
+1. `<div className="accent-bar" />` — always first
+2. 2–4 orbs: `<div className={\`orb ${styles.orbN}\`} />`
+3. Content wrapper: `<div className={\`${styles.body} content-frame content-gutter\`}>` — all visible content here
+4. `<BottomBar text="..." />` — always last child
+
+## Props
+
+Every slide receives `{ index, project, title, subtitle }`. Pass `index` to `<Slide>`.
+
+## Available engine exports
+
+`Slide`, `BottomBar`, `Navigation`, `SlideProvider`, `useSlides`, `GenericThankYouSlide`
+
+## Anti-patterns
+
+- Never omit `accent-bar`, `content-frame content-gutter`, or `BottomBar`
+- Never use string paths for images — always `import logo from '../data/...'`
+- Never hardcode slide indices — use `useSlides().goTo()` for navigation

package/package.json

@@ -1,45 +1,49 @@
-{
-  "name": "@deckio/deck-engine",
-  "version": "1.7.6",
-  "type": "module",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org",
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/lopezleandro03/github-ai-adoption-program.git",
-    "directory": "packages/deck-engine"
-  },
-  "main": "./index.js",
-  "module": "./index.js",
-  "exports": {
-    ".": "./index.js",
-    "./slides/*": "./slides/*.jsx",
-    "./components/*": "./components/*.jsx",
-    "./styles/*": "./styles/*",
-    "./vite": "./vite.js"
-  },
-  "files": [
-    "index.js",
-    "vite.js",
-    "components",
-    "context",
-    "slides",
-    "styles",
-    "scripts",
-    "skills",
-    "instructions"
-  ],
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "peerDependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
-  },
-  "optionalDependencies": {
-    "puppeteer": "^24.38.0",
-    "puppeteer-core": "^24.38.0"
-  }
-}
+{
+  "name": "@deckio/deck-engine",
+  "version": "1.7.8",
+  "type": "module",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/deckio-art/deck-engine.git",
+    "directory": "packages/deck-engine"
+  },
+  "main": "./index.js",
+  "module": "./index.js",
+  "exports": {
+    ".": "./index.js",
+    "./slides/*": "./slides/*.jsx",
+    "./components/*": "./components/*.jsx",
+    "./styles/*": "./styles/*",
+    "./vite": "./vite.js"
+  },
+  "files": [
+    "index.js",
+    "vite.js",
+    "components",
+    "context",
+    "slides",
+    "styles",
+    "scripts",
+    "skills",
+    "instructions"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "dependencies": {
+    "jspdf": "^3.0.3",
+    "modern-screenshot": "^4.6.8"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "optionalDependencies": {
+    "puppeteer": "^24.38.0",
+    "puppeteer-core": "^24.38.0"
+  }
+}

package/scripts/capture-screen.mjs

@@ -1,110 +1,110 @@
-#!/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'
-
-const EDGE = 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe'
-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: EDGE,
-    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)
-})
+#!/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'
+
+const EDGE = 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe'
+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: EDGE,
+    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)
+})