@deckio/deck-engine 1.7.5 → 1.7.7

package/components/exportDeckPdf.js

@@ -0,0 +1,134 @@
+const DEFAULT_PAGE_WIDTH = 1920
+const DEFAULT_PAGE_HEIGHT = 1080
+const EXPORT_TRANSITION_MS = 750
+
+function wait(ms) {
+  return new Promise((resolve) => {
+    window.setTimeout(resolve, ms)
+  })
+}
+
+async function waitForPaint() {
+  await new Promise((resolve) => requestAnimationFrame(() => resolve()))
+  await new Promise((resolve) => requestAnimationFrame(() => resolve()))
+}
+
+async function waitForFonts() {
+  if (document.fonts?.ready) {
+    await document.fonts.ready
+  }
+}
+
+function sanitizeFileName(value) {
+  return String(value || 'deck')
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-|-$/g, '') || 'deck'
+}
+
+function getDeckElement() {
+  return document.querySelector('.deck')
+}
+
+function getSlideNodes(deckElement) {
+  return Array.from(deckElement?.querySelectorAll('.slide') || [])
+}
+
+function getExportFileName({ project, selectedCustomer }) {
+  const baseName = selectedCustomer
+    ? `${selectedCustomer} ${document.title || project || 'deck'}`
+    : document.title || project || 'deck'
+
+  return `${sanitizeFileName(baseName)}.pdf`
+}
+
+function triggerDownload(blob, fileName) {
+  const blobUrl = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = blobUrl
+  link.download = fileName
+  document.body.append(link)
+  link.click()
+  link.remove()
+  window.setTimeout(() => URL.revokeObjectURL(blobUrl), 1000)
+}
+
+export async function exportDeckPdf({
+  current,
+  goTo,
+  project,
+  selectedCustomer,
+  totalSlides,
+  onProgress,
+}) {
+  const deckElement = getDeckElement()
+  const slideNodes = getSlideNodes(deckElement)
+
+  if (!deckElement || slideNodes.length === 0) {
+    throw new Error('No slides found to export')
+  }
+
+  const [{ default: html2canvas }, { jsPDF }] = await Promise.all([
+    import('html2canvas'),
+    import('jspdf'),
+  ])
+
+  const pageWidth = deckElement.clientWidth || DEFAULT_PAGE_WIDTH
+  const pageHeight = deckElement.clientHeight || DEFAULT_PAGE_HEIGHT
+  const backgroundColor = getComputedStyle(document.documentElement)
+    .getPropertyValue('--bg-deep')
+    .trim() || '#080b10'
+  const scale = Math.min(window.devicePixelRatio || 1, 2)
+  const pdf = new jsPDF({
+    orientation: 'landscape',
+    unit: 'px',
+    format: [DEFAULT_PAGE_WIDTH, DEFAULT_PAGE_HEIGHT],
+    compress: true,
+    hotfixes: ['px_scaling'],
+  })
+
+  await waitForFonts()
+
+  try {
+    for (let index = 0; index < totalSlides; index += 1) {
+      onProgress?.({ current: index + 1, total: totalSlides })
+      goTo(index)
+      await waitForPaint()
+      await wait(EXPORT_TRANSITION_MS)
+
+      const activeSlide = document.querySelector('.slide.active') || slideNodes[index]
+      if (!activeSlide) {
+        throw new Error(`Slide ${index + 1} could not be rendered`)
+      }
+
+      const canvas = await html2canvas(activeSlide, {
+        backgroundColor,
+        useCORS: true,
+        allowTaint: true,
+        logging: false,
+        scale,
+        width: pageWidth,
+        height: pageHeight,
+        windowWidth: window.innerWidth,
+        windowHeight: window.innerHeight,
+      })
+
+      const imageData = canvas.toDataURL('image/png')
+      if (index > 0) {
+        pdf.addPage([DEFAULT_PAGE_WIDTH, DEFAULT_PAGE_HEIGHT], 'landscape')
+      }
+
+      pdf.addImage(imageData, 'PNG', 0, 0, DEFAULT_PAGE_WIDTH, DEFAULT_PAGE_HEIGHT, undefined, 'FAST')
+    }
+  } finally {
+    goTo(current)
+    await waitForPaint()
+  }
+
+  const blob = pdf.output('blob')
+  const fileName = getExportFileName({ project, selectedCustomer })
+  triggerDownload(blob, fileName)
+
+  return { fileName }
+}

package/context/SlideContext.jsx

@@ -1,171 +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)
-}
+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

@@ -1,5 +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'
+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

@@ -1,26 +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)
+# 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

@@ -1,34 +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
+---
+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