@cyber-dash-tech/revela 0.19.7 → 0.19.9

package/designs/starter/design.css

@@ -99,24 +99,24 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
     linear-gradient(135deg, #07111f, #101a2b 62%, #243a73);
 }
 
-.template-slide[data-design="starter"][data-template="cover"] .slide-canvas {
+.template-slide[data-template="cover"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.82), rgba(7,17,31,0.42) 52%, rgba(7,17,31,0.24)),
     url("./assets/cover-background.jpg") center center / cover no-repeat;
 }
-.template-slide[data-design="starter"][data-template="agenda"] .slide-canvas {
+.template-slide[data-template="agenda"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.86), rgba(7,17,31,0.58) 52%, rgba(7,17,31,0.32)),
     url("./assets/cover-background.jpg") center center / cover no-repeat;
 }
-.template-slide[data-design="starter"][data-template="section-divider"] .slide-canvas {
+.template-slide[data-template="section-divider"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.86), rgba(16,26,43,0.62) 58%, rgba(36,58,115,0.36)),
     url("./assets/cover-background.jpg") center center / cover no-repeat;
 }
 .template-slide[data-template="closing"] .slide-canvas { background: linear-gradient(135deg, #07111f, #315eea 58%, #18a8d8); }
 
-.template-slide[data-design="starter"][data-template="closing"] .slide-canvas {
+.template-slide[data-template="closing"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.82), rgba(49,94,234,0.42) 58%, rgba(24,168,216,0.24)),
     url("./assets/closing-background.jpg") center center / cover no-repeat;
@@ -162,10 +162,13 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
 .text-panel-formula-fallback { display: block; white-space: normal; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82em; line-height: 1.35; color: inherit; }
 .text-panel-formula-caption { margin: 0; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
 .template-chart-takeaway-list { display: grid; gap: 22px; width: 100%; }
-.template-chart-takeaway-item { display: grid; gap: 7px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.24); }
+.template-chart-takeaway-item { display: grid; gap: 7px; padding-top: 18px; border-top: 1px solid var(--line); }
+.template-text-panel--color .template-chart-takeaway-item { border-top-color: rgba(255,255,255,0.24); }
 .template-chart-takeaway-item:first-child { padding-top: 0; border-top: 0; }
-.template-chart-takeaway-item h3 { margin: 0; font-size: 25px; line-height: 1.24; color: white; }
-.template-chart-takeaway-item p { margin: 0; font-size: 20px; line-height: 1.46; color: rgba(255,255,255,0.78); }
+.template-chart-takeaway-item h3 { margin: 0; font-size: 25px; line-height: 1.24; color: var(--text-primary); }
+.template-text-panel--color .template-chart-takeaway-item h3 { color: white; }
+.template-chart-takeaway-item p { margin: 0; font-size: 20px; line-height: 1.46; color: var(--text-secondary); }
+.template-text-panel--color .template-chart-takeaway-item p { color: rgba(255,255,255,0.78); }
 .template-bar { flex: 1; background: linear-gradient(180deg, var(--accent-primary), var(--accent-cyan)); min-height: 80px; }
 .template-table-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 34px; height: 100%; align-items: stretch; }
 .template-table-layout .template-side-panel { grid-column: 1; grid-row: 1; }
@@ -333,14 +336,14 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
 .template-table,
 .template-insight-panel,
 .template-catalog-panel { box-shadow: none; }
-.template-slide[data-design="starter"][data-template="cover"] .slide-canvas,
-.template-slide[data-design="starter"][data-template="agenda"] .slide-canvas,
-.template-slide[data-design="starter"][data-template="section-divider"] .slide-canvas {
+.template-slide[data-template="cover"] .slide-canvas,
+.template-slide[data-template="agenda"] .slide-canvas,
+.template-slide[data-template="section-divider"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(16,19,22,0.82), rgba(16,19,22,0.42) 52%, rgba(16,19,22,0.18)),
     url("./assets/cover-background.jpg") center center / cover no-repeat;
 }
-.template-slide[data-design="starter"][data-template="closing"] .slide-canvas {
+.template-slide[data-template="closing"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(16,19,22,0.72), rgba(47,115,218,0.34) 58%, rgba(43,159,195,0.22)),
     url("./assets/closing-background.jpg") center center / cover no-repeat;

package/designs/summit/design.css

@@ -99,24 +99,24 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
     linear-gradient(135deg, #07111f, #101a2b 62%, #243a73);
 }
 
-.template-slide[data-design="summit"][data-template="cover"] .slide-canvas {
+.template-slide[data-template="cover"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.82), rgba(7,17,31,0.42) 52%, rgba(7,17,31,0.24)),
     url("./assets/cover-background.jpg") center center / cover no-repeat;
 }
-.template-slide[data-design="summit"][data-template="agenda"] .slide-canvas {
+.template-slide[data-template="agenda"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.86), rgba(7,17,31,0.58) 52%, rgba(7,17,31,0.32)),
     url("./assets/cover-background.jpg") center center / cover no-repeat;
 }
-.template-slide[data-design="summit"][data-template="section-divider"] .slide-canvas {
+.template-slide[data-template="section-divider"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.86), rgba(16,26,43,0.62) 58%, rgba(36,58,115,0.36)),
     url("./assets/cover-background.jpg") center center / cover no-repeat;
 }
 .template-slide[data-template="closing"] .slide-canvas { background: linear-gradient(135deg, #07111f, #315eea 58%, #18a8d8); }
 
-.template-slide[data-design="summit"][data-template="closing"] .slide-canvas {
+.template-slide[data-template="closing"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.82), rgba(49,94,234,0.42) 58%, rgba(24,168,216,0.24)),
     url("./assets/closing-background.jpg") center center / cover no-repeat;
@@ -162,10 +162,13 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
 .text-panel-formula-fallback { display: block; white-space: normal; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82em; line-height: 1.35; color: inherit; }
 .text-panel-formula-caption { margin: 0; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
 .template-chart-takeaway-list { display: grid; gap: 22px; width: 100%; }
-.template-chart-takeaway-item { display: grid; gap: 7px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.24); }
+.template-chart-takeaway-item { display: grid; gap: 7px; padding-top: 18px; border-top: 1px solid var(--line); }
+.template-text-panel--color .template-chart-takeaway-item { border-top-color: rgba(255,255,255,0.24); }
 .template-chart-takeaway-item:first-child { padding-top: 0; border-top: 0; }
-.template-chart-takeaway-item h3 { margin: 0; font-size: 25px; line-height: 1.24; color: white; }
-.template-chart-takeaway-item p { margin: 0; font-size: 20px; line-height: 1.46; color: rgba(255,255,255,0.78); }
+.template-chart-takeaway-item h3 { margin: 0; font-size: 25px; line-height: 1.24; color: var(--text-primary); }
+.template-text-panel--color .template-chart-takeaway-item h3 { color: white; }
+.template-chart-takeaway-item p { margin: 0; font-size: 20px; line-height: 1.46; color: var(--text-secondary); }
+.template-text-panel--color .template-chart-takeaway-item p { color: rgba(255,255,255,0.78); }
 .template-bar { flex: 1; background: linear-gradient(180deg, var(--accent-primary), var(--accent-cyan)); min-height: 80px; }
 .template-table-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 34px; height: 100%; align-items: stretch; }
 .template-table-layout .template-side-panel { grid-column: 1; grid-row: 1; }
@@ -345,14 +348,14 @@ body { margin: 0; background: var(--bg-frame, #07111f); color: var(--text-primar
 .template-timeline-layout .template-text-panel--color {
   background: linear-gradient(135deg, #176c63 0%, #2a8f84 54%, #b0822e 125%);
 }
-.template-slide[data-design="summit"][data-template="cover"] .slide-canvas,
-.template-slide[data-design="summit"][data-template="agenda"] .slide-canvas,
-.template-slide[data-design="summit"][data-template="section-divider"] .slide-canvas {
+.template-slide[data-template="cover"] .slide-canvas,
+.template-slide[data-template="agenda"] .slide-canvas,
+.template-slide[data-template="section-divider"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(10,16,16,0.84), rgba(10,16,16,0.46) 52%, rgba(10,16,16,0.18)),
     url("./assets/cover-background.jpg") center center / cover no-repeat;
 }
-.template-slide[data-design="summit"][data-template="closing"] .slide-canvas {
+.template-slide[data-template="closing"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(10,16,16,0.78), rgba(23,108,99,0.4) 58%, rgba(176,130,46,0.22)),
     url("./assets/closing-background.jpg") center center / cover no-repeat;

package/lib/deck-html/foundation.ts

@@ -1,5 +1,5 @@
 import { existsSync, mkdirSync, writeFileSync } from "fs"
-import { dirname, isAbsolute, normalize, resolve } from "path"
+import { basename, dirname, isAbsolute, normalize, resolve } from "path"
 import { activeDesign, getDesignSection, materializeDesignCssSnapshot } from "../design/designs"
 
 export type DeckFoundationMode = "create" | "repair"
@@ -48,7 +48,12 @@ export function createDeckFoundation(input: CreateDeckFoundationInput): CreateDe
   const foundation = getDesignSection("foundation", design)
   const parts = parseFoundationParts(foundation)
   if (parts.scriptBlocks.length === 0) throw new Error(`Design '${design}' foundation does not include a SlidePresentation JavaScript code block.`)
-  const snapshot = materializeDesignCssSnapshot({ workspaceRoot: input.workspaceRoot, outputPath, designName: design })
+  const snapshot = materializeDesignCssSnapshot({
+    workspaceRoot: input.workspaceRoot,
+    outputPath,
+    designName: design,
+    snapshotName: activeDesignSnapshotName(outputPath),
+  })
 
   const html = renderFoundationHtml({
     language: input.language || "en",
@@ -69,6 +74,7 @@ export function createDeckFoundation(input: CreateDeckFoundationInput): CreateDe
       "design:foundation",
       parts.fontLinks.length > 0 ? "foundation:font-links" : "foundation:font-links:none",
       snapshot.generatedFallback ? "design-css:fallback" : "design-css:snapshot",
+      `design-css:active-snapshot:${snapshot.snapshotName}`,
       snapshot.assetCount > 0 ? "design-assets:snapshot" : "design-assets:none",
       "foundation:SlidePresentation",
     ],
@@ -81,6 +87,14 @@ export function createDeckFoundation(input: CreateDeckFoundationInput): CreateDe
   }
 }
 
+export function activeDesignSnapshotName(outputPath: string): string {
+  const stem = basename(normalizeOutputPath(outputPath), ".html")
+    .toLowerCase()
+    .replace(/[^a-z0-9-]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+  return `${stem || "deck"}-active`
+}
+
 export function normalizeOutputPath(outputPath: string): string {
   const trimmed = outputPath.trim()
   if (!trimmed) throw new Error("outputPath is required")

package/lib/design/designs.ts

@@ -180,6 +180,7 @@ export interface MaterializeDesignPreviewResult {
 export interface DesignCssSnapshotResult {
   ok: true
   design: string
+  snapshotName: string
   sourcePath: string
   snapshotDir: string
   cssPath: string
@@ -425,11 +426,13 @@ export function materializeDesignCssSnapshot(input: {
   workspaceRoot: string
   outputPath: string
   designName?: string
+  snapshotName?: string
 }): DesignCssSnapshotResult {
   const designName = normalizeDesignName(input.designName || activeDesign())
+  const snapshotName = normalizeDesignSnapshotName(input.snapshotName || designName)
   const designDir = resolveDesignPackageDir(designName)
   const outputDir = dirname(normalize(input.outputPath))
-  const snapshotRelDir = normalize(join(outputDir, "_revela-design", designName)).replace(/\\/g, "/")
+  const snapshotRelDir = normalize(join(outputDir, "_revela-design", snapshotName)).replace(/\\/g, "/")
   const snapshotDir = resolve(input.workspaceRoot, snapshotRelDir)
   const cssPath = join(snapshotDir, "design.css")
   const cssRead = readDesignCss(designName)
@@ -450,6 +453,7 @@ export function materializeDesignCssSnapshot(input: {
   return {
     ok: true,
     design: designName,
+    snapshotName,
     sourcePath: cssRead.path || join(designDir, "DESIGN.md"),
     snapshotDir,
     cssPath,
@@ -460,6 +464,14 @@ export function materializeDesignCssSnapshot(input: {
   }
 }
 
+function normalizeDesignSnapshotName(name: string): string {
+  const normalized = name.trim().toLowerCase()
+  if (!/^[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/.test(normalized)) {
+    throw new Error("Design snapshot name must be kebab-case using lowercase letters, numbers, and hyphens")
+  }
+  return normalized
+}
+
 /** Normalize and validate a design package name. */
 export function normalizeDesignName(name: string): string {
   const normalized = name.trim().toLowerCase()

package/lib/page-templates/render.ts

@@ -475,23 +475,23 @@ export function templateDeckCss(input: { designName?: string; designAssetBasePat
   const lucentCoverBackground = designName === "lucent" && assetBasePath ? cssUrl(`${assetBasePath}/cover-background.jpg`) : ""
   const lucentClosingBackground = designName === "lucent" && assetBasePath ? cssUrl(`${assetBasePath}/closing-background.jpg`) : ""
   const lucentCoverBackgroundCss = lucentCoverBackground ? `
-.template-slide[data-design="lucent"][data-template="cover"] .slide-canvas {
+.template-slide[data-template="cover"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.82), rgba(7,17,31,0.42) 52%, rgba(7,17,31,0.24)),
     url("${lucentCoverBackground}") center center / cover no-repeat;
 }
-.template-slide[data-design="lucent"][data-template="agenda"] .slide-canvas {
+.template-slide[data-template="agenda"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.86), rgba(7,17,31,0.58) 52%, rgba(7,17,31,0.32)),
     url("${lucentCoverBackground}") center center / cover no-repeat;
 }
-.template-slide[data-design="lucent"][data-template="section-divider"] .slide-canvas {
+.template-slide[data-template="section-divider"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.86), rgba(16,26,43,0.62) 58%, rgba(36,58,115,0.36)),
     url("${lucentCoverBackground}") center center / cover no-repeat;
 }` : ""
   const lucentClosingBackgroundCss = lucentClosingBackground ? `
-.template-slide[data-design="lucent"][data-template="closing"] .slide-canvas {
+.template-slide[data-template="closing"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.82), rgba(49,94,234,0.42) 58%, rgba(24,168,216,0.24)),
     url("${lucentClosingBackground}") center center / cover no-repeat;
@@ -591,10 +591,13 @@ ${lucentClosingBackgroundCss}
 .template-text-panel-formula-caption { margin: 0; font-size: 14px; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
 .template-text-panel--color .template-text-panel-formula-caption { color: rgba(255,255,255,0.72); }
 .template-chart-takeaway-list { display: grid; gap: 22px; width: 100%; }
-.template-chart-takeaway-item { display: grid; gap: 7px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.24); }
+.template-chart-takeaway-item { display: grid; gap: 7px; padding-top: 18px; border-top: 1px solid var(--line); }
+.template-text-panel--color .template-chart-takeaway-item { border-top-color: rgba(255,255,255,0.24); }
 .template-chart-takeaway-item:first-child { padding-top: 0; border-top: 0; }
-.template-chart-takeaway-item h3 { margin: 0; font-size: 25px; line-height: 1.24; color: white; }
-.template-chart-takeaway-item p { margin: 0; font-size: 20px; line-height: 1.46; color: rgba(255,255,255,0.78); }
+.template-chart-takeaway-item h3 { margin: 0; font-size: 25px; line-height: 1.24; color: var(--text-primary); }
+.template-text-panel--color .template-chart-takeaway-item h3 { color: white; }
+.template-chart-takeaway-item p { margin: 0; font-size: 20px; line-height: 1.46; color: var(--text-secondary); }
+.template-text-panel--color .template-chart-takeaway-item p { color: rgba(255,255,255,0.78); }
 .template-bar { flex: 1; background: linear-gradient(180deg, var(--accent-primary), var(--accent-cyan)); min-height: 80px; }
 .template-table-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 34px; height: 100%; align-items: stretch; }
 .template-table-layout .template-side-panel { grid-column: 1; grid-row: 1; }

package/lib/pptx/export.ts

@@ -577,25 +577,177 @@ async function exportSlidePptx(
       host.style.zIndex = "2147483647"
       host.style.background = "transparent"
 
-      const exportTarget = target.cloneNode(true) as HTMLElement
+      const exportTarget = targetSlide.cloneNode(true) as HTMLElement
       exportTarget.style.width = "1920px"
+      exportTarget.style.minWidth = "1920px"
       exportTarget.style.height = "1080px"
+      exportTarget.style.minHeight = "1080px"
       exportTarget.style.position = "relative"
       exportTarget.style.left = "0"
       exportTarget.style.top = "0"
+      exportTarget.style.margin = "0"
+      exportTarget.style.display = "flex"
+      exportTarget.style.alignItems = "center"
+      exportTarget.style.justifyContent = "center"
+      exportTarget.style.overflow = "hidden"
       exportTarget.style.transform = "none"
       exportTarget.style.transformOrigin = "top left"
       exportTarget.style.transition = "none"
       exportTarget.style.animation = "none"
+      const exportCanvas = exportTarget.querySelector(".slide-canvas") as HTMLElement | null
+      if (!exportCanvas) {
+        host.remove()
+        throw new Error(`Missing cloned .slide-canvas for slide ${index + 1}`)
+      }
+      exportCanvas.style.width = "1920px"
+      exportCanvas.style.minWidth = "1920px"
+      exportCanvas.style.height = "1080px"
+      exportCanvas.style.minHeight = "1080px"
+      exportCanvas.style.position = "relative"
+      exportCanvas.style.left = "0"
+      exportCanvas.style.top = "0"
+      exportCanvas.style.flexShrink = "0"
+      exportCanvas.style.transform = "none"
+      exportCanvas.style.transformOrigin = "top left"
+      exportCanvas.style.transition = "none"
+      exportCanvas.style.animation = "none"
+
+      const splitCssList = (value: string): string[] => {
+        const parts: string[] = []
+        let depth = 0
+        let quote: string | null = null
+        let start = 0
+        for (let i = 0; i < value.length; i += 1) {
+          const char = value[i]
+          if (quote) {
+            if (char === quote && value[i - 1] !== "\\") quote = null
+            continue
+          }
+          if (char === "\"" || char === "'") {
+            quote = char
+            continue
+          }
+          if (char === "(") depth += 1
+          if (char === ")") depth = Math.max(0, depth - 1)
+          if (char === "," && depth === 0) {
+            parts.push(value.slice(start, i).trim())
+            start = i + 1
+          }
+        }
+        parts.push(value.slice(start).trim())
+        return parts.filter(Boolean)
+      }
+
+      const extractCssUrl = (value: string): string | null => {
+        const match = value.match(/url\((["']?)(.*?)\1\)/i)
+        return match?.[2] ?? null
+      }
+
+      const normalizeBackgroundLayersForPptx = (canvas: HTMLElement, sourceStyle: CSSStyleDeclaration) => {
+        const computed = sourceStyle
+        const imageLayers = splitCssList(computed.backgroundImage)
+        const hasUrlLayer = imageLayers.some((layer) => /url\(/i.test(layer))
+        const paddingLeft = Number.parseFloat(computed.paddingLeft) || 0
+        const paddingRight = Number.parseFloat(computed.paddingRight) || 0
+        const paddingTop = Number.parseFloat(computed.paddingTop) || 0
+        const paddingBottom = Number.parseFloat(computed.paddingBottom) || 0
+        const hasPadding = paddingLeft > 0 || paddingRight > 0 || paddingTop > 0 || paddingBottom > 0
+        if (!hasUrlLayer && !hasPadding) return
+
+        const sizeLayers = splitCssList(computed.backgroundSize)
+        const positionLayers = splitCssList(computed.backgroundPosition)
+        const repeatLayers = splitCssList(computed.backgroundRepeat)
+        const layerCount = imageLayers.length
+        const layers = hasUrlLayer ? document.createElement("div") : null
+        if (layers) {
+          layers.setAttribute("data-revela-pptx-background-layers", "true")
+          layers.style.position = "absolute"
+          layers.style.inset = "0"
+          layers.style.pointerEvents = "none"
+          layers.style.zIndex = "0"
+          layers.style.overflow = "hidden"
+        }
+
+        if (layers) imageLayers.forEach((layer, layerIndex) => {
+          if (layer === "none") return
+          const zIndex = String(layerCount - layerIndex)
+          const url = extractCssUrl(layer)
+          const size = sizeLayers[layerIndex] ?? sizeLayers[0] ?? "auto"
+          const position = positionLayers[layerIndex] ?? positionLayers[0] ?? "50% 50%"
+          const repeat = repeatLayers[layerIndex] ?? repeatLayers[0] ?? "repeat"
+          if (url) {
+            const img = document.createElement("img")
+            img.src = url
+            img.alt = ""
+            img.setAttribute("aria-hidden", "true")
+            img.style.position = "absolute"
+            img.style.inset = "0"
+            img.style.width = "100%"
+            img.style.height = "100%"
+            img.style.display = "block"
+            img.style.zIndex = zIndex
+            img.style.objectFit = size.includes("contain") ? "contain" : "cover"
+            img.style.objectPosition = position
+            if (!repeat.includes("no-repeat") && !size.includes("cover") && !size.includes("contain")) {
+              img.style.objectFit = "fill"
+            }
+            layers.appendChild(img)
+            return
+          }
+
+          const gradient = document.createElement("div")
+          gradient.style.position = "absolute"
+          gradient.style.inset = "0"
+          gradient.style.zIndex = zIndex
+          gradient.style.backgroundImage = layer
+          gradient.style.backgroundSize = size
+          gradient.style.backgroundPosition = position
+          gradient.style.backgroundRepeat = repeat
+          layers.appendChild(gradient)
+        })
+
+        if (layers && !layers.childElementCount) return
+
+        const content = document.createElement("div")
+        content.setAttribute("data-revela-pptx-content-layer", "true")
+        content.style.position = "absolute"
+        content.style.zIndex = String(layerCount + 1)
+        content.style.left = `${paddingLeft}px`
+        content.style.top = `${paddingTop}px`
+        content.style.width = `${Math.max(1, 1920 - paddingLeft - paddingRight)}px`
+        content.style.height = `${Math.max(1, 1080 - paddingTop - paddingBottom)}px`
+        content.style.minHeight = "0"
+        content.style.boxSizing = "border-box"
+        while (canvas.firstChild) {
+          content.appendChild(canvas.firstChild)
+        }
+
+        canvas.style.padding = "0"
+        if (layers) {
+          canvas.style.backgroundImage = "none"
+          canvas.style.backgroundColor = computed.backgroundColor
+          canvas.appendChild(layers)
+        }
+        canvas.appendChild(content)
+      }
+
+      normalizeBackgroundLayersForPptx(exportCanvas, window.getComputedStyle(target))
       host.appendChild(exportTarget)
       document.body.appendChild(host)
       await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)))
 
       const rect = exportTarget.getBoundingClientRect()
+      const canvasRect = exportCanvas.getBoundingClientRect()
       if (Math.abs(rect.width - 1920) > 2 || Math.abs(rect.height - 1080) > 2) {
         host.remove()
         throw new Error(
-          `Slide ${index + 1} export canvas is ${Math.round(rect.width)}x${Math.round(rect.height)}, expected 1920x1080.`
+          `Slide ${index + 1} export slide is ${Math.round(rect.width)}x${Math.round(rect.height)}, expected 1920x1080.`
+        )
+      }
+      if (Math.abs(canvasRect.width - 1920) > 2 || Math.abs(canvasRect.height - 1080) > 2) {
+        host.remove()
+        throw new Error(
+          `Slide ${index + 1} export canvas is ${Math.round(canvasRect.width)}x${Math.round(canvasRect.height)}, expected 1920x1080.`
         )
       }
 

package/lib/runtime/index.ts

@@ -1,6 +1,6 @@
 import { createHash } from "crypto"
-import { existsSync, mkdirSync, readFileSync, writeFileSync } from "fs"
-import { dirname, resolve } from "path"
+import { existsSync, mkdirSync, readFileSync, statSync, writeFileSync } from "fs"
+import { dirname, isAbsolute, resolve, sep } from "path"
 import {
   activeDesign,
   activateDesign,
@@ -16,13 +16,14 @@ import {
   listDesignAssets,
   listDesigns,
   materializeDesignPreview,
+  materializeDesignCssSnapshot,
   packDesignPackage,
   seedBuiltinDesigns,
   validateDesignDraftPackage,
   validateDesignPackage,
   type DesignPackageAssetInput,
 } from "../design/designs"
-import { createDeckFoundation as createDeckFoundationShell } from "../deck-html/foundation"
+import { activeDesignSnapshotName, createDeckFoundation as createDeckFoundationShell } from "../deck-html/foundation"
 import { activeDomain, activateDomain, createDomainDraftPackage, createDomainPackage, getDomainSkillMd, installDomainDraftPackage, listDomains, seedBuiltinDomains, validateDomainDraftPackage, validateDomainPackage } from "../domain/domains"
 import { compileNarrativeVault } from "../narrative-vault/compile"
 import { autoCompileNarrativeVault } from "../narrative-vault/auto-compile"
@@ -36,6 +37,8 @@ import { recordRenderedArtifact, workspaceRelative } from "../workspace-state/re
 import { existingWorkspaceMetaPath, workspaceMetaPath } from "../workspace-meta"
 import { checkMaterialIntake, extractMaterial, materialIntakeNoticeForCommand, prepareLocalMaterials, recordMaterialReview } from "../material-intake"
 import type { ReviewDeckOpenInput, ReviewDeckReadInput } from "./review"
+export type { OpenDeckInput } from "./open-deck"
+import { openDeck as openDeckDirect } from "./open-deck"
 import pkg from "../../package.json"
 export { bindResearchFindings, evaluateResearchFindings, researchSave, researchTargets } from "./research"
 export { storyRead } from "./story"
@@ -72,6 +75,12 @@ export interface RuntimeDesignInventoryInput {
   name?: string
 }
 
+export interface RuntimeDeckDesignSwitchInput extends RuntimeWorkspaceInput {
+  file: string
+  name: string
+  openBrowser?: boolean
+}
+
 export interface RuntimeDesignLayoutReadInput {
   name?: string
   layout: string | string[]
@@ -380,6 +389,16 @@ export async function reviewDeckOpen(input: ReviewDeckOpenInput) {
   return review.reviewDeckOpen(input)
 }
 
+export async function openDeck(input: RuntimeFileInput & { openBrowser?: boolean; openUrl?: (url: string) => void }) {
+  const direct = await import("./open-deck")
+  return direct.openDeck(input)
+}
+
+export async function stopOpenDeckServers() {
+  const direct = await import("./open-deck")
+  return direct.stopOpenDeckServers()
+}
+
 export function designList() {
   return {
     ok: true,
@@ -586,6 +605,50 @@ export function designActivate(input: RuntimeNameInput) {
   }
 }
 
+export function switchDeckDesign(input: RuntimeDeckDesignSwitchInput) {
+  seedBuiltinDesigns()
+  const workspaceRoot = root(input.workspaceRoot)
+  const file = normalizeDeckFile(workspaceRoot, requiredString(input.file, "file"))
+  const design = requiredName({ name: input.name }, "design")
+  activateDesign(design)
+
+  const snapshot = materializeDesignCssSnapshot({
+    workspaceRoot,
+    outputPath: file,
+    designName: design,
+    snapshotName: activeDesignSnapshotName(file),
+  })
+
+  const htmlPath = resolve(workspaceRoot, file)
+  const html = readFileSync(htmlPath, "utf-8")
+  const migratedHtml = migrateDeckDesignLink(html, snapshot.href)
+  const migratedLink = migratedHtml !== html
+  if (migratedLink) writeFileSync(htmlPath, migratedHtml, "utf-8")
+
+  const opened = input.openBrowser === false
+    ? undefined
+    : openDeckDirect({ workspaceRoot, file, openBrowser: input.openBrowser })
+
+  return {
+    ok: true,
+    file,
+    activeDesign: activeDesign(),
+    design,
+    snapshotHref: snapshot.href,
+    snapshotDir: workspaceRelative(workspaceRoot, snapshot.snapshotDir),
+    assetCount: snapshot.assetCount,
+    migratedLink,
+    opened: opened ? {
+      ok: opened.ok,
+      url: opened.url,
+      openedBrowser: opened.openedBrowser,
+      mode: opened.mode,
+      readOnly: opened.readOnly,
+    } : undefined,
+    warnings: snapshot.warnings,
+  }
+}
+
 export function domainList() {
   seedBuiltinDomains()
   return {
@@ -659,6 +722,35 @@ function root(workspaceRoot: string | undefined): string {
   return resolve(workspaceRoot || process.cwd())
 }
 
+function normalizeDeckFile(workspaceRoot: string, fileInput: string): string {
+  const requested = fileInput.trim()
+  const absolute = isAbsolute(requested) ? resolve(requested) : resolve(workspaceRoot, requested)
+  if (!isInside(workspaceRoot, absolute)) throw new Error(`Deck HTML file is outside the workspace: ${requested}`)
+  if (!existsSync(absolute) || !statSync(absolute).isFile()) throw new Error(`Deck HTML file not found: ${requested}`)
+  const file = workspaceRelative(workspaceRoot, absolute)
+  if (!file.startsWith("decks/") || !file.endsWith(".html")) throw new Error(`Deck HTML file must be under decks/*.html: ${file}`)
+  return file
+}
+
+function migrateDeckDesignLink(html: string, activeHref: string): string {
+  const escapedHref = activeHref.replace(/"/g, """)
+  if (html.includes(`href="${escapedHref}"`) || html.includes(`href='${escapedHref}'`)) return html
+  const linkRe = /<link\b(?=[^>]*\brel=(["'])stylesheet\1)(?=[^>]*\bhref=(["'])\.\/_revela-design\/[^"']+\/design\.css\2)[^>]*>/i
+  if (linkRe.test(html)) {
+    return html.replace(linkRe, `<link rel="stylesheet" href="${escapedHref}" data-revela-design-link="active">`)
+  }
+  if (/<\/head>/i.test(html)) {
+    return html.replace(/<\/head>/i, `  <link rel="stylesheet" href="${escapedHref}" data-revela-design-link="active">\n</head>`)
+  }
+  return html
+}
+
+function isInside(rootPath: string, candidate: string): boolean {
+  const normalizedRoot = resolve(rootPath)
+  const normalizedCandidate = resolve(candidate)
+  return normalizedCandidate === normalizedRoot || normalizedCandidate.startsWith(normalizedRoot.endsWith(sep) ? normalizedRoot : normalizedRoot + sep)
+}
+
 function safe<T>(fn: () => T): T | undefined {
   try {
     return fn()