@deckio/deck-engine 1.7.6 → 1.7.8

package/components/exportDeckPdf.js

@@ -0,0 +1,133 @@
+/**
+ * Export deck slides to PDF — direct download, no dialogs.
+ *
+ * Uses modern-screenshot (SVG foreignObject) + jspdf.
+ * The browser's own renderer handles all CSS natively:
+ *   - background-clip: text  ✅  (explicit fix in modern-screenshot)
+ *   - filter: blur()         ✅  (native foreignObject rendering)
+ *   - gradients, shadows     ✅
+ *   - animations             paused before capture
+ */
+
+const PAGE_W = 1920
+const PAGE_H = 1080
+const SETTLE_MS = 600
+
+const wait = (ms) => new Promise((r) => setTimeout(r, ms))
+
+async function waitForPaint() {
+  await new Promise((r) => requestAnimationFrame(() => r()))
+  await new Promise((r) => requestAnimationFrame(() => r()))
+}
+
+function sanitize(v) {
+  return String(v || 'deck').trim().toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'deck'
+}
+
+function buildFileName({ project, selectedCustomer }) {
+  const base = selectedCustomer
+    ? `${selectedCustomer} ${document.title || project || 'deck'}`
+    : document.title || project || 'deck'
+  return `${sanitize(base)}.pdf`
+}
+
+/**
+ * Pause animations on a slide for deterministic capture. Returns restore fn.
+ */
+function pauseAnimations(slide) {
+  const undo = []
+  const pause = (el) => {
+    const orig = el.style.animationPlayState
+    el.style.animationPlayState = 'paused'
+    undo.push(() => { el.style.animationPlayState = orig })
+  }
+  pause(slide)
+  slide.querySelectorAll('*').forEach(pause)
+  return () => { for (let i = undo.length - 1; i >= 0; i--) undo[i]() }
+}
+
+export async function exportDeckPdf({
+  current,
+  goTo,
+  project,
+  selectedCustomer,
+  totalSlides,
+  onProgress,
+}) {
+  const deck = document.querySelector('.deck')
+  const slides = Array.from(deck?.querySelectorAll('.slide') || [])
+  if (!deck || slides.length === 0) throw new Error('No slides found')
+
+  // Dynamic imports — tree-shaken, only loaded on export
+  const [{ domToPng }, { jsPDF }] = await Promise.all([
+    import('modern-screenshot'),
+    import('jspdf'),
+  ])
+
+  const bg = 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: [PAGE_W, PAGE_H],
+    compress: true,
+    hotfixes: ['px_scaling'],
+  })
+
+  if (document.fonts?.ready) await document.fonts.ready
+
+  try {
+    for (let i = 0; i < totalSlides; i++) {
+      onProgress?.({ current: i + 1, total: totalSlides })
+      goTo(i)
+      await waitForPaint()
+      await wait(SETTLE_MS)
+
+      const active = document.querySelector('.slide.active') || slides[i]
+      if (!active) throw new Error(`Slide ${i + 1} not found`)
+
+      const restore = pauseAnimations(active)
+      await waitForPaint()
+
+      let dataUrl
+      try {
+        dataUrl = await domToPng(active, {
+          width: active.clientWidth || PAGE_W,
+          height: active.clientHeight || PAGE_H,
+          backgroundColor: bg,
+          scale,
+          style: {
+            // Ensure the captured element is visible and static
+            opacity: '1',
+            transform: 'none',
+            transition: 'none',
+          },
+        })
+      } finally {
+        restore()
+      }
+
+      if (i > 0) pdf.addPage([PAGE_W, PAGE_H], 'landscape')
+      pdf.addImage(dataUrl, 'PNG', 0, 0, PAGE_W, PAGE_H, undefined, 'FAST')
+    }
+  } finally {
+    goTo(current)
+    await waitForPaint()
+  }
+
+  // Direct download — no dialog
+  const blob = pdf.output('blob')
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = buildFileName({ project, selectedCustomer })
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+  setTimeout(() => URL.revokeObjectURL(url), 1000)
+
+  return { fileName: a.download }
+}

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