@deckio/deck-engine 1.8.1 → 1.8.2

package/components/Navigation.jsx

@@ -2,6 +2,7 @@ import { useSlides } from '../context/SlideContext'
 import styles from './Navigation.module.css'
 import { useState, useEffect, useRef } from 'react'
 import { exportDeckPdf } from './exportDeckPdf.js'
+import { exportDeckPptx } from './exportDeckPptx.js'
 
 function resolveProp(value, context) {
   return typeof value === 'function' ? value(context) : value
@@ -13,6 +14,8 @@ export default function Navigation({ pdfPath = null, pdfLabel = 'Deck PDF' }) {
   const [idle, setIdle] = useState(false)
   const [isExporting, setIsExporting] = useState(false)
   const [exportStatus, setExportStatus] = useState('PDF')
+  const [exportMenuOpen, setExportMenuOpen] = useState(false)
+  const exportMenuRef = useRef(null)
   const timerRef = useRef(null)
 
   useEffect(() => {
@@ -36,19 +39,34 @@ export default function Navigation({ pdfPath = null, pdfLabel = 'Deck PDF' }) {
     }
   }, [])
 
+  // Close export menu when clicking outside
+  useEffect(() => {
+    if (!exportMenuOpen) return
+    const handleClickOutside = (e) => {
+      if (exportMenuRef.current && !exportMenuRef.current.contains(e.target)) {
+        setExportMenuOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [exportMenuOpen])
+
   const progress = ((current + 1) / totalSlides) * 100
   const navigationState = { current, totalSlides, selectedCustomer, project }
   const resolvedPdfPath = resolveProp(pdfPath, navigationState)
   const resolvedPdfLabel = resolveProp(pdfLabel, navigationState) || 'Deck PDF'
 
-  async function handleExportClick() {
-    if (resolvedPdfPath || isExporting) return
-
+  async function handleExport(format) {
+    if (isExporting) return
+    setExportMenuOpen(false)
     setIsExporting(true)
     setExportStatus('Preparing')
 
+    const exportFn = format === 'pptx' ? exportDeckPptx : exportDeckPdf
+    const label = format === 'pptx' ? 'PPTX' : 'PDF'
+
     try {
-      await exportDeckPdf({
+      await exportFn({
         current,
         goTo,
         project,
@@ -60,7 +78,7 @@ export default function Navigation({ pdfPath = null, pdfLabel = 'Deck PDF' }) {
       })
       setExportStatus('Done')
     } catch (error) {
-      console.error('PDF export failed', error)
+      console.error(`${label} export failed`, error)
       setExportStatus('Error')
     } finally {
       window.setTimeout(() => {
@@ -89,41 +107,63 @@ export default function Navigation({ pdfPath = null, pdfLabel = 'Deck PDF' }) {
         </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.exportBtn} ${isExporting ? styles.exportBtnBusy : ''}`}
-          type="button"
-          onClick={handleExportClick}
-          disabled={isExporting}
-          title={isExporting ? 'Preparing deck PDF' : 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" />
-            <path d="M12 12v6" />
-            <path d="M9 15l3 3 3-3" />
-            <path d="M8 10h8" />
-          </svg>
-          <span className={styles.exportLabel}>{isExporting ? exportStatus : '⬇ PDF'}</span>
-        </button>
-      )}
+      <div className={styles.exportGroup} ref={exportMenuRef}>
+        {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.exportBtn} ${isExporting ? styles.exportBtnBusy : ''}`}
+            type="button"
+            onClick={() => isExporting ? null : setExportMenuOpen(!exportMenuOpen)}
+            disabled={isExporting}
+            title={isExporting ? 'Exporting...' : 'Export deck'}
+          >
+            <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" />
+              <path d="M12 12v6" />
+              <path d="M9 15l3 3 3-3" />
+              <path d="M8 10h8" />
+            </svg>
+            <span className={styles.exportLabel}>{isExporting ? exportStatus : '⬇'}</span>
+          </button>
+        )}
+
+        {exportMenuOpen && !isExporting && (
+          <div className={styles.exportMenu}>
+            <button className={styles.exportMenuItem} onClick={() => handleExport('pdf')}>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="14" height="14">
+                <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" />
+              </svg>
+              PDF
+            </button>
+            <button className={styles.exportMenuItem} onClick={() => handleExport('pptx')}>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="14" height="14">
+                <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+                <path d="M8 21h8" />
+                <path d="M12 17v4" />
+              </svg>
+              PowerPoint
+            </button>
+          </div>
+        )}
+      </div>
 
       <button
         className={`${styles.navBtn} ${styles.prev}`}

package/components/Navigation.module.css

@@ -98,6 +98,62 @@
   text-transform: uppercase;
 }
 
+.exportGroup {
+  position: fixed;
+  top: 16px;
+  right: 20px;
+  z-index: 200;
+}
+.exportGroup .exportBtn {
+  position: static;
+}
+
+.exportMenu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  min-width: 140px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: rgba(22,27,34,0.95);
+  backdrop-filter: blur(12px);
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+  animation: menuFadeIn 0.15s ease;
+}
+
+@keyframes menuFadeIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.exportMenuItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  white-space: nowrap;
+}
+.exportMenuItem:hover {
+  background: rgba(31,111,235,0.2);
+}
+.exportMenuItem svg {
+  width: 14px; height: 14px;
+  flex-shrink: 0;
+}
+
 .navBtn {
   position: fixed;
   top: 50%;

package/components/exportDeckPptx.js

@@ -0,0 +1,127 @@
+/**
+ * Export deck slides to PowerPoint (.pptx) — direct download, no dialogs.
+ *
+ * Uses modern-screenshot (SVG foreignObject) + PptxGenJS.
+ * Each slide is captured as a full-bleed image placed on a 10×5.625″ slide (16:9).
+ */
+
+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)}.pptx`
+}
+
+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 exportDeckPptx({
+  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')
+
+  const [{ domToPng }, PptxGenJS] = await Promise.all([
+    import('modern-screenshot'),
+    import('pptxgenjs'),
+  ])
+  const Pptx = PptxGenJS.default || PptxGenJS
+
+  const bg = getComputedStyle(document.documentElement)
+    .getPropertyValue('--bg-deep').trim() || '#080b10'
+  const scale = Math.min(window.devicePixelRatio || 1, 2)
+
+  const pptx = new Pptx()
+  pptx.defineLayout({ name: 'WIDE', width: 10, height: 5.625 })
+  pptx.layout = 'WIDE'
+
+  if (document.fonts?.ready) await document.fonts.ready
+
+  const origDeckCss = deck.style.cssText
+  deck.style.width = `${PAGE_W}px`
+  deck.style.height = `${PAGE_H}px`
+  await waitForPaint()
+  await wait(SETTLE_MS)
+
+  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: PAGE_W,
+          height: PAGE_H,
+          backgroundColor: bg,
+          scale,
+          style: {
+            opacity: '1',
+            transform: 'none',
+            transition: 'none',
+          },
+        })
+      } finally {
+        restore()
+      }
+
+      const slide = pptx.addSlide()
+      slide.background = { color: bg.replace('#', '') }
+      slide.addImage({
+        data: dataUrl,
+        x: 0,
+        y: 0,
+        w: '100%',
+        h: '100%',
+      })
+    }
+  } finally {
+    deck.style.cssText = origDeckCss
+    goTo(current)
+    await waitForPaint()
+  }
+
+  const fileName = buildFileName({ project, selectedCustomer })
+  await pptx.writeFile({ fileName })
+
+  return { fileName }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deckio/deck-engine",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "type": "module",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -36,7 +36,8 @@
   ],
   "dependencies": {
     "jspdf": "^3.0.3",
-    "modern-screenshot": "^4.6.8"
+    "modern-screenshot": "^4.6.8",
+    "pptxgenjs": "^3.12.0"
   },
   "peerDependencies": {
     "react": "^19.1.0",