@deckio/deck-engine 1.7.4

package/components/BottomBar.jsx

@@ -0,0 +1,9 @@
+import styles from './BottomBar.module.css'
+
+export default function BottomBar({ text }) {
+  return (
+    <div className={styles.bar}>
+      <span>{text || <>GitHub Copilot &nbsp;&middot;&nbsp; Reimagine Software Development</>}</span>
+    </div>
+  )
+}

package/components/BottomBar.module.css

@@ -0,0 +1,17 @@
+.bar {
+  position: absolute;
+  bottom: 0; left: 0; right: 0;
+  height: 44px;
+  background: rgba(13,17,23,0.85);
+  backdrop-filter: blur(12px);
+  border-top: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 40px;
+  font-size: 11px;
+  letter-spacing: 2.5px;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  z-index: 100;
+}

package/components/Navigation.jsx

@@ -0,0 +1,106 @@
+import { useSlides } from '../context/SlideContext'
+import styles from './Navigation.module.css'
+import { useState, useEffect, useRef } from 'react'
+
+function resolveProp(value, context) {
+  return typeof value === 'function' ? value(context) : value
+}
+
+export default function Navigation({ pdfPath = null, pdfLabel = 'Deck PDF' }) {
+  const { current, totalSlides, go, goTo, selectedCustomer, project } = useSlides()
+  const [hintVisible, setHintVisible] = useState(true)
+  const [idle, setIdle] = useState(false)
+  const timerRef = useRef(null)
+
+  useEffect(() => {
+    const t = setTimeout(() => setHintVisible(false), 5000)
+    return () => clearTimeout(t)
+  }, [])
+
+  useEffect(() => {
+    const resetIdle = () => {
+      setIdle(false)
+      clearTimeout(timerRef.current)
+      timerRef.current = setTimeout(() => setIdle(true), 2000)
+    }
+    resetIdle()
+    window.addEventListener('mousemove', resetIdle)
+    window.addEventListener('mousedown', resetIdle)
+    return () => {
+      window.removeEventListener('mousemove', resetIdle)
+      window.removeEventListener('mousedown', resetIdle)
+      clearTimeout(timerRef.current)
+    }
+  }, [])
+
+  const progress = ((current + 1) / totalSlides) * 100
+  const navigationState = { current, totalSlides, selectedCustomer, project }
+  const resolvedPdfPath = resolveProp(pdfPath, navigationState)
+  const resolvedPdfLabel = resolveProp(pdfLabel, navigationState) || 'Deck PDF'
+
+  return (
+    <div className={`${styles.navWrapper} ${idle ? styles.navHidden : ''}`}>
+      <div className={styles.progressTrack}>
+        <div className={styles.progressFill} style={{ width: `${progress}%` }} />
+      </div>
+
+      {current !== 0 && (
+        <button
+          className={styles.homeBtn}
+          onClick={() => goTo(0)}
+          title="Back to home"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M3 12l9-9 9 9" />
+            <path d="M9 21V9h6v12" />
+          </svg>
+        </button>
+      )}
+
+      {resolvedPdfPath && (
+        <a
+          className={styles.exportBtn}
+          href={resolvedPdfPath}
+          target="_blank"
+          rel="noopener noreferrer"
+          title={resolvedPdfLabel}
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+            <polyline points="14 2 14 8 20 8" />
+            <line x1="16" y1="13" x2="8" y2="13" />
+            <line x1="16" y1="17" x2="8" y2="17" />
+            <polyline points="10 9 9 9 8 9" />
+          </svg>
+          <span className={styles.exportLabel}>PDF</span>
+        </a>
+      )}
+
+      <button
+        className={`${styles.navBtn} ${styles.prev}`}
+        disabled={current === 0}
+        onClick={() => go(-1)}
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+      </button>
+      <button
+        className={`${styles.navBtn} ${styles.next}`}
+        disabled={current === totalSlides - 1}
+        onClick={() => go(1)}
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+          <polyline points="9 6 15 12 9 18" />
+        </svg>
+      </button>
+
+      {hintVisible && (
+        <div className={styles.keyHint}>
+          <span className={styles.kbd}>&larr;</span>
+          <span className={styles.kbd}>&rarr;</span> or click arrows to navigate
+        </div>
+      )}
+    </div>
+  )
+}

package/components/Navigation.module.css

@@ -0,0 +1,145 @@
+.navWrapper {
+  transition: opacity 0.4s ease;
+  opacity: 1;
+}
+
+.navHidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.progressTrack {
+  position: fixed;
+  top: 0; left: 0; right: 0;
+  height: 3px;
+  background: rgba(48,54,61,0.6);
+  z-index: 300;
+}
+
+.progressFill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--purple), var(--accent), var(--cyan));
+  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 0 2px 2px 0;
+  box-shadow: 0 0 12px var(--accent);
+}
+
+.homeBtn {
+  position: fixed;
+  top: 16px;
+  left: 20px;
+  z-index: 200;
+  width: 36px; height: 36px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: rgba(22,27,34,0.8);
+  backdrop-filter: blur(8px);
+  color: var(--text);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.25s ease;
+  opacity: 0.45;
+}
+.homeBtn:hover {
+  opacity: 1;
+  border-color: var(--accent);
+  background: rgba(31,111,235,0.2);
+}
+.homeBtn svg {
+  width: 16px; height: 16px;
+}
+
+.exportBtn {
+  position: fixed;
+  top: 16px;
+  right: 20px;
+  z-index: 200;
+  height: 36px;
+  min-width: 36px;
+  padding: 0 12px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: rgba(22,27,34,0.8);
+  backdrop-filter: blur(8px);
+  color: var(--text);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  transition: all 0.25s ease;
+  opacity: 0.45;
+  text-decoration: none;
+  font-family: inherit;
+}
+.exportBtn:hover {
+  opacity: 1;
+  border-color: var(--accent);
+  background: rgba(31,111,235,0.2);
+}
+.exportBtn svg {
+  width: 16px; height: 16px;
+}
+.exportLabel {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.navBtn {
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 200;
+  width: 48px; height: 48px;
+  border-radius: 50%;
+  border: 1px solid var(--border);
+  background: rgba(22,27,34,0.8);
+  backdrop-filter: blur(8px);
+  color: var(--text);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.25s ease;
+  opacity: 0.5;
+}
+.navBtn:hover { opacity: 1; border-color: var(--accent); background: rgba(31,111,235,0.2); }
+.prev { left: 20px; }
+.next { right: 20px; }
+.navBtn svg { width: 20px; height: 20px; }
+.navBtn:disabled { opacity: 0.15; cursor: default; pointer-events: none; }
+
+.keyHint {
+  position: fixed;
+  bottom: 56px; right: 40px;
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--text-muted);
+  opacity: 0.5;
+  animation: fadeOut 3s 5s forwards;
+}
+
+@keyframes fadeOut {
+  to { opacity: 0; }
+}
+
+.kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px; height: 22px;
+  padding: 0 5px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--surface);
+  font-size: 10px;
+  font-weight: 600;
+  font-family: inherit;
+}

package/components/Slide.jsx

@@ -0,0 +1,15 @@
+import { useSlides } from '../context/SlideContext'
+
+export default function Slide({ index, className = '', children }) {
+  const { current } = useSlides()
+
+  let stateClass = ''
+  if (index === current) stateClass = 'active'
+  else if (index < current) stateClass = 'exit-left'
+
+  return (
+    <div className={`slide ${stateClass} ${className}`} data-slide={index}>
+      {children}
+    </div>
+  )
+}

package/context/SlideContext.jsx

@@ -0,0 +1,171 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+} from 'react'
+
+/*  ╔══════════════════════════════════════════════════════════════╗
+ *  ║                                                              ║
+ *  ║   ▂▃▅▇█  S L I D E   C O N T E X T  █▇▅▃▂                  ║
+ *  ║                                                              ║
+ *  ║   Central state for slide navigation, persistence,           ║
+ *  ║   keyboard / touch input, and customer selection.            ║
+ *  ║                                                              ║
+ *  ╚══════════════════════════════════════════════════════════════╝  */
+
+const SlideContext = createContext()
+
+/*  ┌─────────────────────────────────────────────────────────────┐
+ *  │  ◆  H E L P E R S                                          │
+ *  └─────────────────────────────────────────────────────────────┘  */
+
+/**
+ * Recover the last-viewed slide from sessionStorage.
+ * Survives Vite HMR so you stay on the same slide during dev.
+ *
+ *   sessionStorage key format:  slide:<project>
+ *   returns 0 when nothing stored or value is out of range.
+ */
+function getStoredSlide(project, totalSlides) {
+  try {
+    const idx = parseInt(sessionStorage.getItem(`slide:${project}`), 10)
+    return Number.isFinite(idx) && idx >= 0 && idx < totalSlides ? idx : 0
+  } catch {
+    return 0
+  }
+}
+
+/*  ╭──────────────────────────────────────────────────────────────╮
+ *  │  ◈  P R O V I D E R                                         │
+ *  ╰──────────────────────────────────────────────────────────────╯  */
+
+export function SlideProvider({ children, totalSlides, project, slides }) {
+  const [current, setCurrent] = useState(() =>
+    getStoredSlide(project, totalSlides),
+  )
+  const [selectedCustomer, setSelectedCustomer] = useState(null)
+
+  /*  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+   *  ░  Persist slide index  ─  HMR keeps position  ░
+   *  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  */
+
+  useEffect(() => {
+    try {
+      sessionStorage.setItem(`slide:${project}`, current)
+    } catch {
+      /* storage full / unavailable – ignore */
+    }
+  }, [current, project])
+
+  /*  📡 ─────────────────────────────────────────────
+   *  │  Notify parent window of slide changes        │
+   *  │  (used by deck-launcher to provide context)   │
+   *  ───────────────────────────────────────── 📡   */
+
+  useEffect(() => {
+    try {
+      if (window.parent && window.parent !== window) {
+        const slideName = slides?.[current]?.displayName || slides?.[current]?.name || ''
+        window.parent.postMessage({
+          type: 'deck:slide',
+          project,
+          slideIndex: current,
+          slideName,
+          totalSlides,
+        }, '*')
+      }
+    } catch {
+      /* cross-origin or non-iframe – ignore */
+    }
+  }, [current, project, totalSlides, slides])
+
+  /*  ▸ ▸ ▸  Navigation helpers  ◂ ◂ ◂  */
+
+  const go = useCallback(
+    (dir) => {
+      setCurrent((prev) => {
+        const next = prev + dir
+        return next < 0 || next >= totalSlides ? prev : next
+      })
+    },
+    [totalSlides],
+  )
+
+  const goTo = useCallback(
+    (idx) => {
+      if (idx >= 0 && idx < totalSlides) setCurrent(idx)
+    },
+    [totalSlides],
+  )
+
+  /*  ⌨ ─────────────────────────────────────────────────────
+   *  │  Keyboard  →  ←  Space  PageDown  PageUp  Enter    │
+   *  ───────────────────────────────────────────────── ⌨  */
+
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown' || e.key === 'Enter') {
+        e.preventDefault()
+        go(1)
+      }
+      if (e.key === 'ArrowLeft' || e.key === 'PageUp') {
+        e.preventDefault()
+        go(-1)
+      }
+    }
+
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [go])
+
+  /*  👆 ─────────────────────────────────
+   *  │  Touch / swipe  (threshold 50px) │
+   *  ───────────────────────────── 👆   */
+
+  useEffect(() => {
+    let touchX = 0
+
+    const onStart = (e) => {
+      touchX = e.changedTouches[0].screenX
+    }
+    const onEnd = (e) => {
+      const diff = touchX - e.changedTouches[0].screenX
+      if (Math.abs(diff) > 50) go(diff > 0 ? 1 : -1)
+    }
+
+    document.addEventListener('touchstart', onStart)
+    document.addEventListener('touchend', onEnd)
+    return () => {
+      document.removeEventListener('touchstart', onStart)
+      document.removeEventListener('touchend', onEnd)
+    }
+  }, [go])
+
+  /*  ◇─────────────── render ───────────────◇  */
+
+  return (
+    <SlideContext.Provider
+      value={{
+        current,
+        totalSlides,
+        go,
+        goTo,
+        selectedCustomer,
+        setSelectedCustomer,
+        project,
+      }}
+    >
+      {children}
+    </SlideContext.Provider>
+  )
+}
+
+/*  ┌─────────────────────────────────────────────────────────────┐
+ *  │  ◆  H O O K                                                │
+ *  └─────────────────────────────────────────────────────────────┘  */
+
+export function useSlides() {
+  return useContext(SlideContext)
+}

package/index.js

@@ -0,0 +1,5 @@
+export { SlideProvider, useSlides } from './context/SlideContext.jsx'
+export { default as Slide } from './components/Slide.jsx'
+export { default as Navigation } from './components/Navigation.jsx'
+export { default as BottomBar } from './components/BottomBar.jsx'
+export { default as GenericThankYouSlide } from './slides/GenericThankYouSlide.jsx'

package/instructions/AGENTS.md

@@ -0,0 +1,26 @@
+# Deck Project
+
+This is a presentation deck built with `@deckio/deck-engine`.
+
+## Purpose
+
+Create and maintain slide-based presentations. Each project is a self-contained deck with its own theme, data, and slides.
+
+## What to do
+
+- Create, edit, and delete slides in `src/slides/`
+- Manage project data in `src/data/`
+- Register and reorder slides in `deck.config.js`
+
+## What NOT to do
+
+- Do not modify `App.jsx`, `main.jsx`, `vite.config.js`, `package.json`, or `index.html` — these are scaffolding files driven by the engine
+- Do not modify anything in `node_modules/` or the engine itself
+- Do not add dependencies without being asked
+
+## Stack
+
+- React 19, Vite, CSS Modules
+- `@deckio/deck-engine` provides: `Slide`, `BottomBar`, `Navigation`, `SlideProvider`, `useSlides`, `GenericThankYouSlide`
+- See `.github/instructions/` for detailed conventions on slide JSX, CSS modules, and deck.config.js
+- See `.github/skills/` for step-by-step workflows (e.g., adding a slide)

package/instructions/deck-config.instructions.md

@@ -0,0 +1,34 @@
+---
+description: "Use when editing deck.config.js to register slides or modify project configuration."
+applyTo: "**/deck.config.js"
+---
+
+# deck.config.js Conventions
+
+## Structure
+
+```js
+import CoverSlide from './src/slides/CoverSlide.jsx'
+import MySlide from './src/slides/MySlide.jsx'
+
+export default {
+  id: 'my-project',          // lowercase-hyphens, unique slug
+  title: 'Project Title',
+  subtitle: 'Tagline',
+  description: 'Metadata',
+  icon: '🚀',                // emoji for launcher
+  accent: '#7c3aed',         // CSS color, sets --accent
+  order: 1,                  // sort position in launcher
+  slides: [
+    CoverSlide,
+    MySlide,
+    // ThankYouSlide is typically last
+  ],
+}
+```
+
+## Registering a new slide
+
+1. Add an import at the top: `import NewSlide from './src/slides/NewSlide.jsx'`
+2. Insert the component in the `slides` array at the desired position
+3. Indices are assigned by array position — do not manage them manually

package/instructions/deck-project.instructions.md

@@ -0,0 +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

package/instructions/slide-css.instructions.md

@@ -0,0 +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` |

package/instructions/slide-jsx.instructions.md

@@ -0,0 +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