@deckio/deck-engine 1.7.7 → 1.7.8

package/components/Navigation.jsx

@@ -121,7 +121,7 @@ export default function Navigation({ pdfPath = null, pdfLabel = 'Deck PDF' }) {
             <path d="M9 15l3 3 3-3" />
             <path d="M8 10h8" />
           </svg>
-          <span className={styles.exportLabel}>{exportStatus}</span>
+          <span className={styles.exportLabel}>{isExporting ? exportStatus : '⬇ PDF'}</span>
         </button>
       )}
 

package/components/exportDeckPdf.js

@@ -1,57 +1,50 @@
-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)
-  })
-}
+/**
+ * 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((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')
+  await new Promise((r) => requestAnimationFrame(() => r()))
+  await new Promise((r) => requestAnimationFrame(() => r()))
 }
 
-function getSlideNodes(deckElement) {
-  return Array.from(deckElement?.querySelectorAll('.slide') || [])
+function sanitize(v) {
+  return String(v || 'deck').trim().toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'deck'
 }
 
-function getExportFileName({ project, selectedCustomer }) {
-  const baseName = selectedCustomer
+function buildFileName({ project, selectedCustomer }) {
+  const base = selectedCustomer
     ? `${selectedCustomer} ${document.title || project || 'deck'}`
     : document.title || project || 'deck'
-
-  return `${sanitizeFileName(baseName)}.pdf`
+  return `${sanitize(base)}.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)
+/**
+ * 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({
@@ -62,73 +55,79 @@ export async function exportDeckPdf({
   totalSlides,
   onProgress,
 }) {
-  const deckElement = getDeckElement()
-  const slideNodes = getSlideNodes(deckElement)
+  const deck = document.querySelector('.deck')
+  const slides = Array.from(deck?.querySelectorAll('.slide') || [])
+  if (!deck || slides.length === 0) throw new Error('No slides found')
 
-  if (!deckElement || slideNodes.length === 0) {
-    throw new Error('No slides found to export')
-  }
-
-  const [{ default: html2canvas }, { jsPDF }] = await Promise.all([
-    import('html2canvas'),
+  // Dynamic imports — tree-shaken, only loaded on export
+  const [{ domToPng }, { jsPDF }] = await Promise.all([
+    import('modern-screenshot'),
     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 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: [DEFAULT_PAGE_WIDTH, DEFAULT_PAGE_HEIGHT],
+    format: [PAGE_W, PAGE_H],
     compress: true,
     hotfixes: ['px_scaling'],
   })
 
-  await waitForFonts()
+  if (document.fonts?.ready) await document.fonts.ready
 
   try {
-    for (let index = 0; index < totalSlides; index += 1) {
-      onProgress?.({ current: index + 1, total: totalSlides })
-      goTo(index)
+    for (let i = 0; i < totalSlides; i++) {
+      onProgress?.({ current: i + 1, total: totalSlides })
+      goTo(i)
       await waitForPaint()
-      await wait(EXPORT_TRANSITION_MS)
+      await wait(SETTLE_MS)
 
-      const activeSlide = document.querySelector('.slide.active') || slideNodes[index]
-      if (!activeSlide) {
-        throw new Error(`Slide ${index + 1} could not be rendered`)
-      }
+      const active = document.querySelector('.slide.active') || slides[i]
+      if (!active) throw new Error(`Slide ${i + 1} not found`)
+
+      const restore = pauseAnimations(active)
+      await waitForPaint()
 
-      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')
+      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()
       }
 
-      pdf.addImage(imageData, 'PNG', 0, 0, DEFAULT_PAGE_WIDTH, DEFAULT_PAGE_HEIGHT, undefined, 'FAST')
+      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 fileName = getExportFileName({ project, selectedCustomer })
-  triggerDownload(blob, fileName)
-
-  return { fileName }
-}
+  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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deckio/deck-engine",
-  "version": "1.7.7",
+  "version": "1.7.8",
   "type": "module",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -35,8 +35,8 @@
     "**/*.css"
   ],
   "dependencies": {
-    "html2canvas": "^1.4.1",
-    "jspdf": "^3.0.3"
+    "jspdf": "^3.0.3",
+    "modern-screenshot": "^4.6.8"
   },
   "peerDependencies": {
     "react": "^19.1.0",