@cyber-dash-tech/revela 0.19.6 → 0.19.8

package/lib/pptx/export.ts

@@ -22,6 +22,7 @@ import { basename, dirname, extname, join, posix as pathPosix, resolve } from "p
 import { randomBytes } from "crypto"
 import { pathToFileURL } from "url"
 import { findChromePath, launchChrome } from "../browser/chrome"
+import { withExportBaseHref } from "../export/html"
 
 const CANVAS_W = 1920
 const CANVAS_H = 1080
@@ -344,6 +345,7 @@ async function preparePage(
     document.documentElement.style.scrollSnapType = "none"
     document.documentElement.style.overflow = "visible"
     document.body.style.overflow = "visible"
+    document.body.style.margin = "0"
 
     const slides = Array.from(document.querySelectorAll(".slide")) as HTMLElement[]
     if (slides.length === 0) {
@@ -366,7 +368,24 @@ async function preparePage(
       exportStyle = document.createElement("style")
       exportStyle.id = "revela-pptx-export-style"
       exportStyle.textContent = `
+        html, body {
+          scroll-snap-type: none !important;
+          overflow: visible !important;
+        }
+        .slide {
+          width: 1920px !important;
+          min-width: 1920px !important;
+          height: 1080px !important;
+          min-height: 1080px !important;
+          display: flex !important;
+          align-items: center !important;
+          justify-content: center !important;
+          overflow: hidden !important;
+          scroll-snap-align: none !important;
+        }
         .slide-canvas {
+          width: 1920px !important;
+          height: 1080px !important;
           transform: none !important;
           transform-origin: top left !important;
           transition: none !important;
@@ -466,6 +485,48 @@ async function readSlideMeta(
   })
 }
 
+async function rasterizeFormulaNodes(page: Page, diagnostics: string[]): Promise<number> {
+  const handles = await page.$$(".template-text-panel-formula, .text-panel-formula")
+  let rasterized = 0
+
+  for (const handle of handles) {
+    try {
+      const box = await handle.boundingBox()
+      if (!box || box.width <= 0 || box.height <= 0) continue
+
+      const base64 = await (handle as any).screenshot({
+        encoding: "base64",
+        omitBackground: true,
+      })
+
+      await handle.evaluate((node, payload) => {
+        const element = node as HTMLElement
+        const img = document.createElement("img")
+        img.src = `data:image/png;base64,${payload.base64}`
+        img.alt = element.getAttribute("data-latex") || "Formula"
+        img.setAttribute("data-revela-pptx-formula-raster", "true")
+        img.style.width = `${payload.width}px`
+        img.style.height = `${payload.height}px`
+        img.style.maxWidth = "100%"
+        img.style.display = "block"
+        img.style.objectFit = "contain"
+        element.replaceChildren(img)
+      }, {
+        base64,
+        width: Math.ceil(box.width),
+        height: Math.ceil(box.height),
+      })
+
+      rasterized += 1
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error)
+      diagnostics.push(`formula rasterize failed: ${message}`)
+    }
+  }
+
+  return rasterized
+}
+
 async function exportSlidePptx(
   page: Page,
   diagnostics: string[],
@@ -499,15 +560,199 @@ async function exportSlidePptx(
         })
       }
 
-      target.scrollIntoView({ block: "center", inline: "center" })
       target.style.transform = "none"
       target.style.transformOrigin = "top left"
       target.style.transition = "none"
       target.style.animation = "none"
       await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)))
 
+      const host = document.createElement("div")
+      host.id = "revela-pptx-export-root"
+      host.style.position = "fixed"
+      host.style.left = "0"
+      host.style.top = "0"
+      host.style.width = "1920px"
+      host.style.height = "1080px"
+      host.style.overflow = "hidden"
+      host.style.zIndex = "2147483647"
+      host.style.background = "transparent"
+
+      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 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.`
+        )
+      }
+
       await Promise.all(
-        Array.from(target.querySelectorAll("img")).map(async (img) => {
+        Array.from(exportTarget.querySelectorAll("img")).map(async (img) => {
           if (img.complete) return
           await new Promise((resolve) => {
             img.addEventListener("load", resolve, { once: true })
@@ -516,15 +761,19 @@ async function exportSlidePptx(
         })
       )
 
-      const blob: Blob = await domToPptx.exportToPptx(target, {
-        fileName: `slide-${index + 1}.pptx`,
-        skipDownload: true,
-        svgAsVector: false,
-        autoEmbedFonts,
-        width: 10,
-        height: 5.625,
-      })
-      return Array.from(new Uint8Array(await blob.arrayBuffer()))
+      try {
+        const blob: Blob = await domToPptx.exportToPptx(exportTarget, {
+          fileName: `slide-${index + 1}.pptx`,
+          skipDownload: true,
+          svgAsVector: false,
+          autoEmbedFonts,
+          width: 10,
+          height: 5.625,
+        })
+        return Array.from(new Uint8Array(await blob.arrayBuffer()))
+      } finally {
+        host.remove()
+      }
     }, { index: slide.index, autoEmbedFonts: options.autoEmbedFonts })
 
     return {
@@ -717,6 +966,55 @@ function setSpeakerNotes(files: ZipFiles, notesPath: string, notes: string | nul
   files[notesPath] = xmlToBytes(doc)
 }
 
+function stripSvgBlipFallbacks(pptxBytes: Uint8Array): Uint8Array {
+  const files = unzipSync(pptxBytes)
+  const orphanedSvgParts = new Set<string>()
+
+  for (const slidePath of Object.keys(files).filter((path) => /^ppt\/slides\/slide\d+\.xml$/.test(path))) {
+    const slideXml = getFileText(files, slidePath)
+    if (!slideXml.includes("asvg:svgBlip")) continue
+
+    const slideDoc = parseXml(slideXml)
+    const relsPath = relsPathForPart(slidePath)
+    const relsDoc = files[relsPath] ? parseXml(getFileText(files, relsPath)) : null
+    const svgRelIds = new Set<string>()
+
+    for (const svgBlip of Array.from(slideDoc.getElementsByTagName("asvg:svgBlip"))) {
+      const relId = svgBlip.getAttribute("r:embed")
+      if (relId) svgRelIds.add(relId)
+    }
+
+    for (const blip of Array.from(slideDoc.getElementsByTagName("a:blip"))) {
+      for (const extLst of Array.from(blip.getElementsByTagName("a:extLst"))) {
+        if (Array.from(extLst.getElementsByTagName("asvg:svgBlip")).length === 0) continue
+        blip.removeChild(extLst)
+      }
+    }
+
+    if (relsDoc && svgRelIds.size > 0) {
+      const relRoot = relsDoc.getElementsByTagName("Relationships")[0]
+      for (const rel of Array.from(relsDoc.getElementsByTagName("Relationship"))) {
+        const relId = rel.getAttribute("Id")
+        if (!relId || !svgRelIds.has(relId)) continue
+        const target = rel.getAttribute("Target")
+        if (target) orphanedSvgParts.add(resolveRelationshipTarget(slidePath, target))
+        relRoot?.removeChild(rel)
+      }
+      files[relsPath] = xmlToBytes(relsDoc)
+    }
+
+    files[slidePath] = xmlToBytes(slideDoc)
+  }
+
+  for (const partPath of orphanedSvgParts) {
+    if (/^ppt\/media\/.+\.svg$/i.test(partPath)) {
+      delete files[partPath]
+    }
+  }
+
+  return zipSync(files, { level: 0 })
+}
+
 export function applySpeakerNotesToPptx(pptxBytes: Uint8Array, notesBySlide: Array<string | null | undefined>): Uint8Array {
   const files = unzipSync(pptxBytes)
 
@@ -724,7 +1022,7 @@ export function applySpeakerNotesToPptx(pptxBytes: Uint8Array, notesBySlide: Arr
     setSpeakerNotes(files, `ppt/notesSlides/notesSlide${index + 1}.xml`, notes ?? null)
   })
 
-  return zipSync(files)
+  return stripSvgBlipFallbacks(zipSync(files))
 }
 
 function updateAppProperties(files: ZipFiles, slideCount: number): void {
@@ -898,7 +1196,7 @@ function mergeSingleSlidePptx(slides: ExportedSlide[]): Uint8Array {
   mergedFiles["ppt/_rels/presentation.xml.rels"] = xmlToBytes(presentationRelsDoc)
   updateAppProperties(mergedFiles, slides.length)
 
-  return zipSync(mergedFiles, { level: 0 })
+  return stripSvgBlipFallbacks(zipSync(mergedFiles, { level: 0 }))
 }
 
 export async function exportToPptx(
@@ -937,7 +1235,7 @@ export async function exportToPptx(
     const prepareStart = Date.now()
     const originalHtml = readFileSync(abs, "utf-8")
     const localized = await localizeExternalImages(originalHtml, tmpDir)
-    const patchedHtml = await inlineImageAssets(localized.html, abs)
+    const patchedHtml = withExportBaseHref(await inlineImageAssets(localized.html, abs), abs)
     tmpHtmlPath = join(tmpDir, "index.html")
     writeFileSync(tmpHtmlPath, patchedHtml, "utf-8")
     timingsMs.prepareMs = Date.now() - prepareStart
@@ -961,6 +1259,7 @@ export async function exportToPptx(
   try {
     const pageSetupStart = Date.now()
     const { page, slideCount, diagnostics } = await preparePage(browser, tmpHtmlPath, domToPptxBundlePath)
+    const rasterizedFormulaCount = await rasterizeFormulaNodes(page, diagnostics)
     timingsMs.pageSetupMs = Date.now() - pageSetupStart
     const exported: ExportedSlide[] = []
     const failures: SlideFailure[] = []
@@ -969,7 +1268,9 @@ export async function exportToPptx(
       const slides = applySpeakerNotesOverride(await readSlideMeta(page, slideCount), options?.speakerNotes)
       await emitProgress(options, {
         kind: "stage",
-        message: `Deck ready. Exporting ${slides.length} slide(s) to editable PPTX parts...`,
+        message: rasterizedFormulaCount > 0
+          ? `Deck ready. Rasterized ${rasterizedFormulaCount} formula text member(s). Exporting ${slides.length} slide(s) to editable PPTX parts...`
+          : `Deck ready. Exporting ${slides.length} slide(s) to editable PPTX parts...`,
       })
 
       const slideExportStart = Date.now()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-dash-tech/revela",
-  "version": "0.19.6",
+  "version": "0.19.8",
   "description": "Codex-first CLI/MCP workspace for trusted narrative artifacts from local sources, research, and evidence",
   "type": "module",
   "main": "./index.ts",
@@ -68,6 +68,7 @@
     "dom-to-pptx": "^1.1.6",
     "fflate": "^0.8.2",
     "jimp": "^1.6.1",
+    "katex": "^0.17.0",
     "mammoth": "^1.12.0",
     "pdf-lib": "^1.17.1",
     "puppeteer-core": "^24.40.0",

package/plugins/revela/.codex-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "revela",
-  "version": "0.19.6",
+  "version": "0.19.7",
   "description": "Use Revela in Codex to specify, research, plan, make, and export trusted narrative decision artifacts.",
   "author": {
     "name": "cyber-dash-tech",