@deckio/deck-engine 1.7.6 → 1.7.7

package/components/BottomBar.jsx

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

@@ -1,17 +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;
-}
+.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

@@ -1,106 +1,155 @@
-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>
-  )
-}
+import { useSlides } from '../context/SlideContext'
+import styles from './Navigation.module.css'
+import { useState, useEffect, useRef } from 'react'
+import { exportDeckPdf } from './exportDeckPdf.js'
+
+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 [isExporting, setIsExporting] = useState(false)
+  const [exportStatus, setExportStatus] = useState('PDF')
+  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'
+
+  async function handleExportClick() {
+    if (resolvedPdfPath || isExporting) return
+
+    setIsExporting(true)
+    setExportStatus('Preparing')
+
+    try {
+      await exportDeckPdf({
+        current,
+        goTo,
+        project,
+        selectedCustomer,
+        totalSlides,
+        onProgress: ({ current: slideNumber, total }) => {
+          setExportStatus(`${slideNumber}/${total}`)
+        },
+      })
+      setExportStatus('Done')
+    } catch (error) {
+      console.error('PDF export failed', error)
+      setExportStatus('Error')
+    } finally {
+      window.setTimeout(() => {
+        setIsExporting(false)
+        setExportStatus('PDF')
+      }, 1200)
+    }
+  }
+
+  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.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}>{exportStatus}</span>
+        </button>
+      )}
+
+      <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

@@ -1,145 +1,154 @@
-.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;
-}
+.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:disabled {
+  cursor: wait;
+}
+.exportBtn:hover {
+  opacity: 1;
+  border-color: var(--accent);
+  background: rgba(31,111,235,0.2);
+}
+.exportBtnBusy {
+  opacity: 1;
+  border-color: var(--accent);
+  background: rgba(31,111,235,0.22);
+  box-shadow: 0 0 0 1px rgba(121, 192, 255, 0.18), 0 0 24px rgba(31, 111, 235, 0.18);
+}
+.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

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