@deckio/deck-engine 0.1.0

package/components/BottomBar.jsx

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

package/components/BottomBar.module.css

@@ -0,0 +1,17 @@
+.bar {
+  position: absolute;
+  bottom: 0; left: 0; right: 0;
+  height: var(--space-11);
+  background: var(--background-overlay);
+  backdrop-filter: blur(12px);
+  border-top: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--space-10);
+  font-size: var(--font-size-xs);
+  letter-spacing: var(--letter-spacing-wider);
+  text-transform: uppercase;
+  color: var(--muted-foreground);
+  z-index: var(--z-bar);
+}

package/components/Navigation.jsx

@@ -0,0 +1,195 @@
+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
+}
+
+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 [exportMenuOpen, setExportMenuOpen] = useState(false)
+  const exportMenuRef = useRef(null)
+  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)
+    }
+  }, [])
+
+  // 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 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 exportFn({
+        current,
+        goTo,
+        project,
+        selectedCustomer,
+        totalSlides,
+        onProgress: ({ current: slideNumber, total }) => {
+          setExportStatus(`${slideNumber}/${total}`)
+        },
+      })
+      setExportStatus('Done')
+    } catch (error) {
+      console.error(`${label} 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>
+      )}
+
+      <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}`}
+        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

@@ -0,0 +1,210 @@
+.navWrapper {
+  transition: opacity var(--transition-slow);
+  opacity: 1;
+}
+
+.navHidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.progressTrack {
+  position: fixed;
+  top: 0; left: 0; right: 0;
+  height: 3px;
+  background: var(--border-subtle);
+  z-index: var(--z-progress);
+}
+
+.progressFill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--purple), var(--accent), var(--cyan));
+  transition: width var(--duration-progress) var(--ease-slide);
+  border-radius: 0 2px 2px 0;
+  box-shadow: 0 0 12px var(--accent);
+}
+
+.homeBtn {
+  position: fixed;
+  top: var(--space-4);
+  left: var(--space-5);
+  z-index: var(--z-nav);
+  width: 36px; height: 36px;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  background: var(--surface-overlay);
+  backdrop-filter: blur(8px);
+  color: var(--foreground);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-base);
+  opacity: 0.45;
+}
+.homeBtn:hover {
+  opacity: 1;
+  border-color: var(--accent);
+  background: var(--glow-primary);
+}
+.homeBtn svg {
+  width: 16px; height: 16px;
+}
+
+.exportBtn {
+  position: fixed;
+  top: var(--space-4);
+  right: var(--space-5);
+  z-index: var(--z-nav);
+  height: 36px;
+  min-width: 36px;
+  padding: 0 var(--space-3);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  background: var(--surface-overlay);
+  backdrop-filter: blur(8px);
+  color: var(--foreground);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-1-5);
+  transition: all var(--transition-base);
+  opacity: 0.45;
+  text-decoration: none;
+  font-family: inherit;
+}
+.exportBtn:disabled {
+  cursor: wait;
+}
+.exportBtn:hover {
+  opacity: 1;
+  border-color: var(--accent);
+  background: var(--glow-primary);
+}
+.exportBtnBusy {
+  opacity: 1;
+  border-color: var(--accent);
+  background: var(--glow-primary-strong);
+  box-shadow: 0 0 0 1px var(--glow-ring), 0 0 24px var(--glow-primary-shadow);
+}
+.exportBtn svg {
+  width: 16px; height: 16px;
+}
+.exportLabel {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.exportGroup {
+  position: fixed;
+  top: var(--space-4);
+  right: var(--space-5);
+  z-index: var(--z-nav);
+}
+.exportGroup .exportBtn {
+  position: static;
+}
+
+.exportMenu {
+  position: absolute;
+  top: calc(100% + var(--space-1-5));
+  right: 0;
+  min-width: 140px;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  background: var(--surface-overlay-heavy);
+  backdrop-filter: blur(12px);
+  padding: var(--space-1);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-0-5);
+  box-shadow: var(--shadow-elevated);
+  animation: menuFadeIn var(--transition-fast);
+}
+
+@keyframes menuFadeIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.exportMenuItem {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border: none;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--foreground);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  font-family: inherit;
+  cursor: pointer;
+  transition: background var(--transition-fast);
+  white-space: nowrap;
+}
+.exportMenuItem:hover {
+  background: var(--glow-primary);
+}
+.exportMenuItem svg {
+  width: 14px; height: 14px;
+  flex-shrink: 0;
+}
+
+.navBtn {
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: var(--z-nav);
+  width: var(--space-12); height: var(--space-12);
+  border-radius: var(--radius-full);
+  border: 1px solid var(--border);
+  background: var(--surface-overlay);
+  backdrop-filter: blur(8px);
+  color: var(--foreground);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-base);
+  opacity: 0.5;
+}
+.navBtn:hover { opacity: 1; border-color: var(--accent); background: var(--glow-primary); }
+.prev { left: var(--space-5); }
+.next { right: var(--space-5); }
+.navBtn svg { width: var(--space-5); height: var(--space-5); }
+.navBtn:disabled { opacity: 0.15; cursor: default; pointer-events: none; }
+
+.keyHint {
+  position: fixed;
+  bottom: var(--space-14); right: var(--space-10);
+  z-index: var(--z-nav);
+  display: flex;
+  align-items: center;
+  gap: var(--space-1-5);
+  font-size: var(--font-size-xs);
+  color: var(--muted-foreground);
+  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: var(--radius-sm);
+  background: var(--secondary);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-semibold);
+  font-family: inherit;
+}

package/components/Slide.jsx

@@ -0,0 +1,43 @@
+import { useRef, useEffect, useState } from 'react'
+import { useSlides } from '../context/SlideContext'
+
+const DEV = typeof import.meta !== 'undefined' && import.meta.env?.DEV
+
+export default function Slide({ index, className = '', children }) {
+  const { current } = useSlides()
+  const ref = useRef(null)
+  const [overflow, setOverflow] = useState(false)
+
+  let stateClass = ''
+  if (index === current) stateClass = 'active'
+  else if (index < current) stateClass = 'exit-left'
+
+  useEffect(() => {
+    if (!DEV || index !== current || !ref.current) return
+    const el = ref.current
+    const check = () => {
+      // Only check flow-positioned children; ignore absolute/fixed decorations (orbs, accent-bar)
+      const hasOverflow = Array.from(el.children).some(c => {
+        const pos = getComputedStyle(c).position
+        if (pos === 'absolute' || pos === 'fixed') return false
+        return c.offsetTop + c.offsetHeight > el.clientHeight
+      })
+      setOverflow(hasOverflow)
+    }
+    check()
+    const obs = new ResizeObserver(check)
+    obs.observe(el)
+    return () => obs.disconnect()
+  }, [index, current])
+
+  return (
+    <div ref={ref} className={`slide ${stateClass} ${className}`} data-slide={index}>
+      {children}
+      {DEV && overflow && (
+        <div className="slide-overflow-warn">
+          ⚠ Content overflows slide — reduce content or use smaller elements
+        </div>
+      )}
+    </div>
+  )
+}

package/components/exportDeckPdf.js

@@ -0,0 +1,142 @@
+/**
+ * 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('--background').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
+
+  // Force deck to canonical PDF dimensions so slides render at exactly
+  // PAGE_W × PAGE_H regardless of the current viewport size.
+  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: {
+            // 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 {
+    deck.style.cssText = origDeckCss
+    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 }
+}