@deckio/deck-engine 1.7.7 → 1.8.0

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/Slide.jsx

@@ -1,15 +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 className={`slide ${stateClass} ${className}`} data-slide={index}>
+    <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

@@ -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/instructions/slide-css.instructions.md

@@ -10,12 +10,13 @@ applyTo: "**/slides/**/*.module.css"
 ```css
 .mySlide {
   background: var(--bg-deep);
-  flex-direction: column;
   padding: 0 0 44px 0;        /* reserve BottomBar height */
 }
 ```
 
-Add `justify-content: center` for cover or thank-you slides.
+The engine's `.slide` class already sets `flex-direction: column`, `justify-content: center`, and `overflow: hidden`. The engine also sets `flex-grow: 0` on all direct slide children, so **content stays at its natural height and is vertically centered by default** — building from the center outward. No scrolling is allowed.
+
+For dense slides that need top-alignment, override with `justify-content: flex-start`.
 
 ## Orb positioning recipe
 
@@ -40,12 +41,12 @@ Add `justify-content: center` for cover or thank-you slides.
   z-index: 10;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  flex: 1;
-  min-height: 0;
+  gap: 24px;
 }
 ```
 
+> **Do NOT add `flex: 1` or `flex-grow: 1`** to the body wrapper or any direct slide child — it stretches the wrapper to fill the slide and defeats the engine's built-in vertical centering. The engine sets `flex-grow: 0` on all direct slide children to ensure content builds from the center outward. Inner elements within the body wrapper should also avoid `flex: 1` unless they genuinely need to fill remaining space within the body.
+
 ## Theme variables (always use these, never hard-code colors)
 
 | Variable | Value |
@@ -89,3 +90,7 @@ Add `justify-content: center` for cover or thank-you slides.
 | Subtitle | `17px` | 300–400 | — |
 | Body | `13px–14px` | 400 | — |
 | Badge | `10px–11px` | 600–700 | `1.5px` |
+
+## Content density limits
+
+Slides must never overflow the viewport. The engine shows a **red dashed border warning** in dev mode when content exceeds the slide bounds. When content doesn't fit, split across multiple slides rather than cramming. A presentation with more slides is better than one with clipped content.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deckio/deck-engine",
-  "version": "1.7.7",
+  "version": "1.8.0",
   "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",

package/skills/deck-add-slide/SKILL.md

@@ -59,16 +59,16 @@ Create a companion `.module.css` file matching the JSX filename (e.g., `MyNewSli
 ```css
 .myNewSlide {
   background: var(--bg-deep);
-  flex-direction: column;
   padding: 0 0 44px 0;
 }
 ```
 
 - `background: var(--bg-deep)` — dark background on every slide
-- `flex-direction: column` — global `.slide` sets `display: flex`; this orients content vertically
 - `padding: 0 0 44px 0` — reserves space for the 44px BottomBar
 
-Optional: add `justify-content: center` to vertically center content (cover slides, thank-you slides).
+The engine's `.slide` class provides `flex-direction: column`, `justify-content: center`, `align-items: stretch`, and `overflow: hidden` by default. It also sets `flex-grow: 0` on all direct slide children, so **content stays at its natural height and is vertically centered by default** — building from the center outward. No scrolling is allowed.
+
+For dense slides that need top-alignment, override with `justify-content: flex-start`.
 
 ### Orb positioning (standard recipe)
 
@@ -85,7 +85,7 @@ Optional: add `justify-content: center` to vertically center content (cover slid
 }
 ```
 
-### Vertical centering body wrapper
+### Body wrapper
 
 ```css
 .body {
@@ -93,12 +93,12 @@ Optional: add `justify-content: center` to vertically center content (cover slid
   z-index: 10;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  flex: 1;
-  min-height: 0;
+  gap: 24px;
 }
 ```
 
+> **Do NOT add `flex: 1` or `flex-grow: 1`** to the body wrapper or any direct slide child — it stretches the wrapper to fill the slide and defeats the engine's built-in vertical centering. Inner elements within the body should also avoid `flex: 1` unless they genuinely need to fill remaining space within the body.
+
 ### Available CSS custom properties
 
 ```
@@ -190,7 +190,23 @@ export default {
 
 ---
 
-## F. Anti-Patterns to Avoid
+## F. Content Density Limits
+
+Slides must never overflow the viewport. The engine shows a **red dashed border warning** in dev mode when content exceeds the slide bounds. Follow these limits:
+
+| Layout | Max items | Notes |
+|--------|-----------|-------|
+| Cards (3-col grid) | 6 (2 rows) | Reduce card padding if tight |
+| Cards (2-col grid) | 4 (2 rows) | Preferred for detailed cards |
+| Timeline / event list | 3–4 items | Use compact card height for 4 |
+| Bullet points | 6–8 | Depends on line length |
+| Full-width content blocks | 2–3 | E.g. quote + detail section |
+
+**When content exceeds limits**, split across multiple slides rather than cramming.
+
+---
+
+## G. Anti-Patterns to Avoid
 
 1. **Missing `accent-bar`** — include on every slide.
 2. **Missing `content-frame content-gutter`** — content will be full-width without standard margins.
@@ -198,10 +214,13 @@ export default {
 4. **String paths for images** — always use `import logo from '../data/...'` (Vite resolves to URL).
 5. **Missing `padding: 0 0 44px 0`** on the slide root CSS class — content will overlap the BottomBar.
 6. **Inconsistent `BottomBar text`** — check existing slides and match their footer text.
+7. **Using `flex: 1` on body wrapper** — defeats vertical centering; the body should size to its content.
+8. **Adding `flex-direction: column` on slide root** — already provided by the engine's `.slide` class.
+9. **Overloading a slide** — if the dev server shows a red dashed border, the slide has too much content. Split into multiple slides.
 
 ---
 
-## G. Complete Step-by-Step
+## H. Complete Step-by-Step
 
 1. **Create** `src/slides/<SlideName>Slide.jsx` following the mandatory skeleton (section A).
 2. **Create** `src/slides/<SlideName>Slide.module.css` with required root properties (section B).
@@ -211,7 +230,7 @@ export default {
 ### Quick checklist
 
 - [ ] Created `<SlideName>Slide.jsx` with Slide, accent-bar, orbs, content-frame, BottomBar
-- [ ] Created `<SlideName>Slide.module.css` with `background: var(--bg-deep)`, `flex-direction: column`, `padding: 0 0 44px 0`, body centering wrapper
+- [ ] Created `<SlideName>Slide.module.css` with `background: var(--bg-deep)`, `padding: 0 0 44px 0`, body wrapper (no `flex: 1`)
 - [ ] Import added to `deck.config.js`
 - [ ] Component added to `slides` array at correct position
 - [ ] `BottomBar text` matches project convention

package/skills/deck-validate-project/SKILL.md

@@ -35,8 +35,9 @@ For each slide `.jsx` file in `src/slides/`, verify:
 
 For each `.module.css` file, verify the root class has:
 - [ ] `background: var(--bg-deep)`
-- [ ] `flex-direction: column`
 - [ ] `padding: 0 0 44px 0`
+- [ ] Does NOT use `flex: 1` on the body wrapper (defeats vertical centering)
+- [ ] Does NOT redundantly set `flex-direction: column` (inherited from engine `.slide` class)
 
 ---
 
@@ -76,5 +77,5 @@ Summarize findings:
 - [ ] Every `.jsx` slide has a companion `.module.css`
 - [ ] All slides have accent-bar, content-frame, BottomBar
 - [ ] BottomBar text is consistent across the project
-- [ ] CSS root classes have required properties
+- [ ] CSS root classes have required properties (`background`, `padding`) and no `flex: 1` on body wrapper
 - [ ] Project metadata (id, title, subtitle, icon, accent) is present

package/styles/global.css

@@ -40,6 +40,9 @@ html, body, #root {
   position: absolute;
   inset: 0;
   display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
@@ -47,6 +50,9 @@ html, body, #root {
   transform: translateX(60px);
   overflow: hidden;
 }
+.slide > * {
+  flex-grow: 0;
+}
 .slide.active {
   opacity: 1;
   pointer-events: auto;
@@ -57,6 +63,24 @@ html, body, #root {
   transform: translateX(-60px);
 }
 
+/* ── Dev-mode overflow warning ── */
+.slide-overflow-warn {
+  position: absolute;
+  inset: 0;
+  border: 3px dashed #f85149;
+  pointer-events: none;
+  z-index: 9999;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding-bottom: 56px;
+  background: rgba(248, 81, 73, 0.04);
+  font-size: 13px;
+  font-weight: 600;
+  color: #f85149;
+  letter-spacing: 0.3px;
+}
+
 /* ── Shared Decorations ── */
 .orb {
   position: absolute;
@@ -98,11 +122,7 @@ html, body, #root {
    ══════════════════════════════════════════════════ */
 .deck-ty {
   background: var(--bg-deep);
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: center;
   padding: 0 0 44px 0;
-  overflow: hidden;
 }
 
 /* Ambient glow orbs */