@markdstage/markdstage 3.0.0 → 3.1.0

package/shared/renderer/slides.css

@@ -276,6 +276,12 @@ body.mermaid-loading .mermaid{visibility:hidden;}
 .architecture-routing-warning span{font-family:"Cascadia Code","Cascadia Mono",Consolas,monospace;
      font-size:.85em;overflow-wrap:anywhere;}
 hr{border:0;border-top:1px solid var(--border);margin:.7em 0;}
+/* Flex item margins do not collapse, so regular slide bodies use their gap as
+   the single source of vertical spacing. Nested component spacing is unchanged. */
+.deck:not(.title-slide):not(.section-slide):not(.backcover-slide)>.body>:where(p,h1,h2,h3,h4,h5,h6,ul,ol,blockquote,pre,table):has(+:where(p,h1,h2,h3,h4,h5,h6,ul,ol,blockquote,pre,table)),
+.deck:not(.title-slide):not(.section-slide):not(.backcover-slide)>.body>:where(p,h1,h2,h3,h4,h5,h6,ul,ol,blockquote,pre,table)+:where(p,h1,h2,h3,h4,h5,h6,ul,ol,blockquote,pre,table){
+  margin-block:0;
+}
 footer{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;
        color:var(--muted);font-size:clamp(12px,1.7vh,16px);
        margin-top:clamp(12px,2.2vh,26px);border-top:1px solid var(--border);padding-top:12px;}
@@ -656,6 +662,7 @@ body.pptx-artwork-mode [data-pptx-native="table"] *{
 }
 body.pptx-artwork-mode li[data-pptx-native="text"]::marker{color:transparent!important;}
 body.pptx-artwork-mode [data-pptx-native="table"]{visibility:hidden!important;}
+body.pptx-artwork-mode pre[data-pptx-native="code"]{visibility:hidden!important;}
 body.pptx-artwork-mode img[data-pptx-native="image"]{
   object-fit:none!important;
   object-position:99999px 99999px!important;
@@ -674,6 +681,18 @@ body.pptx-artwork-mode svg [data-pptx-native="table"]{
 }
 body.pptx-artwork-mode svg path[data-pptx-native="connector"]{marker-end:none!important;}
 body.pptx-artwork-mode svg [data-pptx-native="image"]{opacity:0!important;}
+body.pptx-artwork-mode [data-pptx-shadow-fallback]{box-shadow:none!important;}
+body.pptx-artwork-mode .pptx-fallback-hidden{visibility:hidden!important;}
+body.pptx-slide-artwork-mode .deck:not(.pptx-layout-template){
+  background:transparent!important;
+}
+body.pptx-slide-artwork-mode .deck:not(.pptx-layout-template)::before{
+  display:none!important;
+}
+body.pptx-slide-artwork-mode .deck:not(.pptx-layout-template)>.theme-cover-background,
+body.pptx-slide-artwork-mode .deck:not(.pptx-layout-template)>.theme-cover-logo{
+  visibility:hidden!important;
+}
 
 /* ===== Headless PDF export ===== */
 @page{size:13.333333in 7.5in;margin:0;}

package/shared/runtime/browser.mjs

@@ -453,7 +453,13 @@ export async function runPptxOutputBrowser(browser, pageUrl, profileDir, job, to
       );
     }
     const model = evaluated.result?.value;
-    if (!model || !Array.isArray(model.slides) || model.slides.length !== total) {
+    if (
+      !model ||
+      !Array.isArray(model.masters) ||
+      !Array.isArray(model.layouts) ||
+      !Array.isArray(model.slides) ||
+      model.slides.length !== total
+    ) {
       throw new Error("The renderer returned an invalid PowerPoint export model.");
     }
 
@@ -463,26 +469,111 @@ export async function runPptxOutputBrowser(browser, pageUrl, profileDir, job, to
       awaitPromise: true,
     });
 
-    const backgrounds = [];
-    for (let index = 0; index < total; index += 1) {
+    const layoutArtworks = [];
+    for (const [index, layout] of model.layouts.entries()) {
+      const captureIndex = Number.isInteger(layout.captureIndex)
+        ? layout.captureIndex
+        : total + index;
       const screenshot = await cdp.send("Page.captureScreenshot", {
         format: "png",
         fromSurface: true,
         captureBeyondViewport: true,
         clip: {
           x: 0,
-          y: index * 720,
+          y: captureIndex * 720,
           width: 1280,
           height: 720,
           scale: 1,
         },
       });
       if (typeof screenshot.data !== "string" || screenshot.data.length === 0) {
-        throw new Error(`Chromium did not return fallback artwork for slide ${index + 1}.`);
+        throw new Error(`Chromium did not return artwork for PowerPoint layout ${layout.id}.`);
       }
-      backgrounds.push(Buffer.from(screenshot.data, "base64"));
+      layoutArtworks.push(Buffer.from(screenshot.data, "base64"));
     }
-    return { model, backgrounds };
+
+    await cdp.send("Runtime.evaluate", {
+      expression:
+        "document.body.classList.remove('pptx-layout-artwork-mode');" +
+        "document.body.classList.add('pptx-slide-artwork-mode');" +
+        "new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)))",
+      awaitPromise: true,
+    });
+    await cdp.send("Emulation.setDefaultBackgroundColorOverride", {
+      color: { r: 0, g: 0, b: 0, a: 0 },
+    });
+
+    const slideFallbackImages = [];
+    for (const [slideIndex, slide] of model.slides.entries()) {
+      const images = [];
+      const fallbacks = Array.isArray(slide.fallbacks) ? slide.fallbacks : [];
+      for (const [fallbackIndex, fallback] of fallbacks.entries()) {
+        if (fallback?.artwork === false) continue;
+        if (typeof fallback?.captureId !== "string" || !fallback.captureId) {
+          throw new Error(
+            `PowerPoint fallback ${fallbackIndex + 1} on slide ${slideIndex + 1} is missing its capture id.`,
+          );
+        }
+        const left = Math.max(0, Number(fallback?.x));
+        const top = Math.max(0, Number(fallback?.y));
+        const right = Math.min(1280, Number(fallback?.x) + Number(fallback?.width));
+        const bottom = Math.min(720, Number(fallback?.y) + Number(fallback?.height));
+        if (
+          ![left, top, right, bottom].every(Number.isFinite) ||
+          right <= left ||
+          bottom <= top
+        ) {
+          throw new Error(
+            `PowerPoint fallback ${fallbackIndex + 1} on slide ${slideIndex + 1} has invalid bounds.`,
+          );
+        }
+        const bounds = {
+          x: left,
+          y: top,
+          width: right - left,
+          height: bottom - top,
+        };
+        await cdp.send("Runtime.evaluate", {
+          expression: `(() => {
+            const active = ${JSON.stringify(fallback.captureId)};
+            for (const element of document.querySelectorAll("[data-pptx-fallback-ids]")) {
+              const ids = (element.getAttribute("data-pptx-fallback-ids") || "").split(/\\s+/);
+              element.classList.toggle("pptx-fallback-hidden", !ids.includes(active));
+            }
+            return new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+          })()`,
+          awaitPromise: true,
+        });
+        const screenshot = await cdp.send("Page.captureScreenshot", {
+          format: "png",
+          fromSurface: true,
+          captureBeyondViewport: true,
+          clip: {
+            x: bounds.x,
+            y: slideIndex * 720 + bounds.y,
+            width: bounds.width,
+            height: bounds.height,
+            scale: 1,
+          },
+        });
+        if (typeof screenshot.data !== "string" || screenshot.data.length === 0) {
+          throw new Error(
+            `Chromium did not return fallback artwork ${fallbackIndex + 1} for slide ${slideIndex + 1}.`,
+          );
+        }
+        images.push({
+          fallbackIndex,
+          ...bounds,
+          data: Buffer.from(screenshot.data, "base64"),
+        });
+      }
+      slideFallbackImages.push(images);
+    }
+    await cdp.send("Runtime.evaluate", {
+      expression:
+        'document.querySelectorAll(".pptx-fallback-hidden").forEach(element => element.classList.remove("pptx-fallback-hidden"));',
+    });
+    return { model, layoutArtworks, slideFallbackImages };
   } finally {
     await closeCdpOutputPage(cdp, child);
   }

package/shared/runtime/output.mjs

@@ -9,7 +9,7 @@
 import { mkdtemp, rename, rm, writeFile } from "node:fs/promises";
 import { basename, extname, join } from "node:path";
 import { tmpdir } from "node:os";
-import { randomUUID } from "node:crypto";
+import { createHash, randomUUID } from "node:crypto";
 import { getOutputSnapshotSlides } from "../deck-state.mjs";
 import { normalizeTheme } from "../renderer/theme.mjs";
 import { MarkdStageError } from "./errors.mjs";
@@ -81,13 +81,21 @@ export function createOutputJob(snapshot, kind) {
 }
 
 function decodeDataImage(source) {
-  const match = /^data:(image\/(?:png|jpeg|gif))(;base64)?,([\s\S]*)$/i.exec(source);
+  const match = /^data:(image\/(?:png|jpeg|gif|svg\+xml))((?:;[^,]*)*),([\s\S]*)$/i.exec(source);
   if (!match) {
-    throw new Error("Only PNG, JPEG, or GIF data URLs can be embedded in PowerPoint.");
+    throw new Error("Only PNG, JPEG, GIF, or SVG data URLs can be embedded in PowerPoint.");
   }
-  const data = match[2]
+  const parameters = match[2]
+    .split(";")
+    .map((parameter) => parameter.trim().toLowerCase())
+    .filter(Boolean);
+  const base64 = parameters.includes("base64");
+  const data = base64
     ? Buffer.from(match[3], "base64")
-    : Buffer.from(decodeURIComponent(match[3]), "binary");
+    : Buffer.from(
+        decodeURIComponent(match[3]),
+        match[1].toLowerCase() === "image/svg+xml" ? "utf8" : "binary",
+      );
   return { data, contentType: match[1].toLowerCase() };
 }
 
@@ -126,7 +134,7 @@ async function loadPptxImage(inst, source, fetchImpl, currentTotal) {
   const data = Buffer.from(await response.arrayBuffer());
   ensurePptxAssetSize(data, source, currentTotal);
   const responseType = response.headers.get("content-type")?.split(";")[0].trim().toLowerCase();
-  const contentType = ["image/png", "image/jpeg", "image/gif"].includes(responseType)
+  const contentType = ["image/png", "image/jpeg", "image/gif", "image/svg+xml"].includes(responseType)
     ? responseType
     : undefined;
   return { data, contentType };
@@ -135,7 +143,8 @@ async function loadPptxImage(inst, source, fetchImpl, currentTotal) {
 export async function preparePptxPackageModel(
   inst,
   model,
-  backgrounds,
+  layoutArtworks,
+  slideFallbackImages,
   fetchImpl = fetch,
 ) {
   if (
@@ -143,29 +152,148 @@ export async function preparePptxPackageModel(
     model.version !== 1 ||
     model.width !== PPTX_DIMENSIONS.widthPx ||
     model.height !== PPTX_DIMENSIONS.heightPx ||
+    !Array.isArray(model.masters) ||
+    model.masters.length === 0 ||
+    !Array.isArray(model.layouts) ||
+    model.layouts.length === 0 ||
     !Array.isArray(model.slides) ||
     model.slides.length === 0
   ) {
     throw new Error("The renderer returned an unsupported PowerPoint export model.");
   }
-  if (!Array.isArray(backgrounds) || backgrounds.length !== model.slides.length) {
-    throw new Error("PowerPoint fallback artwork does not match the slide count.");
+  if (!Array.isArray(layoutArtworks) || layoutArtworks.length !== model.layouts.length) {
+    throw new Error("PowerPoint layout artwork does not match the layout count.");
+  }
+  if (
+    !Array.isArray(slideFallbackImages) ||
+    slideFallbackImages.length !== model.slides.length ||
+    slideFallbackImages.some((images) => !Array.isArray(images))
+  ) {
+    throw new Error("PowerPoint fallback images do not match the slide count.");
   }
 
   const assets = [];
   const sourceAssets = new Map();
+  const pngAssets = new Map();
   let totalAssetBytes = 0;
-  for (const [index, background] of backgrounds.entries()) {
-    if (!Buffer.isBuffer(background)) {
-      throw new Error(`PowerPoint fallback artwork for slide ${index + 1} is invalid.`);
+  const addPngAsset = (id, data, label) => {
+    if (!Buffer.isBuffer(data)) {
+      throw new Error(`${label} is invalid.`);
     }
-    ensurePptxAssetSize(background, `slide ${index + 1} fallback artwork`, totalAssetBytes);
-    totalAssetBytes += background.length;
+    const key = createHash("sha256").update(data).digest("hex");
+    const existing = pngAssets.get(key);
+    if (existing) return existing;
+    ensurePptxAssetSize(data, label, totalAssetBytes);
+    totalAssetBytes += data.length;
     assets.push({
-      id: `markdstage-background-${index + 1}`,
+      id,
       contentType: "image/png",
-      data: background,
+      data,
     });
+    pngAssets.set(key, id);
+    return id;
+  };
+  const prepareImage = async (sourceElement) => {
+    const source = sourceElement.src;
+    let assetId = sourceAssets.get(source);
+    if (!assetId) {
+      const loaded = await loadPptxImage(inst, source, fetchImpl, totalAssetBytes);
+      totalAssetBytes += loaded.data.length;
+      assetId = `markdstage-image-${sourceAssets.size + 1}`;
+      sourceAssets.set(source, assetId);
+      assets.push({ id: assetId, ...loaded });
+    }
+    const { src: _src, source: _source, ...image } = sourceElement;
+    if (
+      (image.fit === "contain" || image.fit === "scale-down") &&
+      image.naturalWidth > 0 &&
+      image.naturalHeight > 0
+    ) {
+      const scale = Math.min(
+        image.width / image.naturalWidth,
+        image.height / image.naturalHeight,
+        image.fit === "scale-down" ? 1 : Number.POSITIVE_INFINITY,
+      );
+      const width = image.naturalWidth * scale;
+      const height = image.naturalHeight * scale;
+      image.x += (image.width - width) / 2;
+      image.y += (image.height - height) / 2;
+      image.width = width;
+      image.height = height;
+    }
+    return { ...image, assetId };
+  };
+
+  const layouts = [];
+  const layoutById = new Map();
+  for (const [index, sourceLayout] of model.layouts.entries()) {
+    if (
+      !sourceLayout ||
+      typeof sourceLayout.id !== "string" ||
+      !sourceLayout.id ||
+      typeof sourceLayout.name !== "string" ||
+      !sourceLayout.name ||
+      typeof sourceLayout.theme !== "string" ||
+      !sourceLayout.theme
+    ) {
+      throw new Error(`PowerPoint layout ${index + 1} is invalid.`);
+    }
+    if (layoutById.has(sourceLayout.id)) {
+      throw new Error(`PowerPoint layout id is duplicated: ${sourceLayout.id}`);
+    }
+    const artworkAssetId = addPngAsset(
+      `markdstage-layout-${index + 1}`,
+      layoutArtworks[index],
+      `PowerPoint artwork for layout ${sourceLayout.id}`,
+    );
+    const sourceElements = sourceLayout.elements ?? [];
+    if (!Array.isArray(sourceElements) || sourceElements.some((element) => element?.type !== "image")) {
+      throw new Error(`PowerPoint layout ${sourceLayout.id} has an invalid element list.`);
+    }
+    const elements = [];
+    for (const sourceElement of sourceElements) {
+      elements.push(await prepareImage(sourceElement));
+    }
+    const layout = {
+      id: sourceLayout.id,
+      name: sourceLayout.name,
+      theme: sourceLayout.theme,
+      artworkAssetId,
+      elements,
+    };
+    layoutById.set(layout.id, layout);
+    layouts.push(layout);
+  }
+
+  const masters = model.masters.map((sourceMaster, index) => {
+    if (
+      !sourceMaster ||
+      typeof sourceMaster.id !== "string" ||
+      !sourceMaster.id ||
+      typeof sourceMaster.theme !== "string" ||
+      !sourceMaster.theme ||
+      !Array.isArray(sourceMaster.layoutIds) ||
+      sourceMaster.layoutIds.length === 0
+    ) {
+      throw new Error(`PowerPoint master ${index + 1} is invalid.`);
+    }
+    const layoutIds = sourceMaster.layoutIds.map((layoutId) => {
+      const layout = layoutById.get(layoutId);
+      if (!layout || layout.theme !== sourceMaster.theme) {
+        throw new Error(
+          `PowerPoint master ${sourceMaster.id} references invalid layout ${layoutId}.`,
+        );
+      }
+      return layoutId;
+    });
+    return {
+      id: sourceMaster.id,
+      theme: sourceMaster.theme,
+      layoutIds,
+    };
+  });
+  if (new Set(masters.map((master) => master.id)).size !== masters.length) {
+    throw new Error("PowerPoint master ids must be unique.");
   }
 
   const slides = [];
@@ -173,6 +301,12 @@ export async function preparePptxPackageModel(
     if (!sourceSlide || !Array.isArray(sourceSlide.elements)) {
       throw new Error(`PowerPoint slide ${slideIndex + 1} has an invalid element list.`);
     }
+    if (
+      typeof sourceSlide.layoutId !== "string" ||
+      !layoutById.has(sourceSlide.layoutId)
+    ) {
+      throw new Error(`PowerPoint slide ${slideIndex + 1} references an invalid layout.`);
+    }
     if (sourceSlide.notes !== undefined && typeof sourceSlide.notes !== "string") {
       throw new Error(`PowerPoint slide ${slideIndex + 1} has invalid speaker notes.`);
     }
@@ -182,42 +316,75 @@ export async function preparePptxPackageModel(
         elements.push(sourceElement);
         continue;
       }
-      const source = sourceElement.src;
-      let assetId = sourceAssets.get(source);
-      if (!assetId) {
-        const loaded = await loadPptxImage(inst, source, fetchImpl, totalAssetBytes);
-        totalAssetBytes += loaded.data.length;
-        assetId = `markdstage-image-${sourceAssets.size + 1}`;
-        sourceAssets.set(source, assetId);
-        assets.push({ id: assetId, ...loaded });
-      }
-      const { src: _src, source: _source, ...image } = sourceElement;
+      elements.push(await prepareImage(sourceElement));
+    }
+    const fallbacks = Array.isArray(sourceSlide.fallbacks) ? sourceSlide.fallbacks : [];
+    const expectedFallbackIndexes = fallbacks
+      .map((fallback, fallbackIndex) => ({ fallback, fallbackIndex }))
+      .filter(({ fallback }) => fallback?.artwork !== false);
+    const captures = slideFallbackImages[slideIndex];
+    if (captures.length !== expectedFallbackIndexes.length) {
+      throw new Error(
+        `PowerPoint fallback images do not match slide ${slideIndex + 1}.`,
+      );
+    }
+    const captureByFallback = new Map();
+    for (const capture of captures) {
       if (
-        (image.fit === "contain" || image.fit === "scale-down") &&
-        image.naturalWidth > 0 &&
-        image.naturalHeight > 0
+        !capture ||
+        !Number.isInteger(capture.fallbackIndex) ||
+        captureByFallback.has(capture.fallbackIndex)
       ) {
-        const scale = Math.min(
-          image.width / image.naturalWidth,
-          image.height / image.naturalHeight,
-          image.fit === "scale-down" ? 1 : Number.POSITIVE_INFINITY,
+        throw new Error(`PowerPoint fallback image for slide ${slideIndex + 1} is invalid.`);
+      }
+      captureByFallback.set(capture.fallbackIndex, capture);
+    }
+    const fallbackElements = [];
+    for (const { fallback, fallbackIndex } of expectedFallbackIndexes) {
+      const capture = captureByFallback.get(fallbackIndex);
+      if (!capture) {
+        throw new Error(
+          `PowerPoint fallback image ${fallbackIndex + 1} for slide ${slideIndex + 1} is missing.`,
         );
-        const width = image.naturalWidth * scale;
-        const height = image.naturalHeight * scale;
-        image.x += (image.width - width) / 2;
-        image.y += (image.height - height) / 2;
-        image.width = width;
-        image.height = height;
       }
-      elements.push({ ...image, assetId });
+      const assetId = addPngAsset(
+        `markdstage-slide-${slideIndex + 1}-fallback-${fallbackIndex + 1}`,
+        capture.data,
+        `PowerPoint fallback image ${fallbackIndex + 1} for slide ${slideIndex + 1}`,
+      );
+      fallbackElements.push({
+        type: "image",
+        path: fallback.path,
+        name: `${fallback.type || "Fallback"} artwork`,
+        x: capture.x,
+        y: capture.y,
+        width: capture.width,
+        height: capture.height,
+        fit: "fill",
+        opacity: 1,
+        ...(Number.isFinite(fallback.zOrder) ? { zOrder: fallback.zOrder } : {}),
+        assetId,
+      });
     }
+    const orderedElements = [...fallbackElements, ...elements]
+      .map((element, elementIndex) => ({ element, elementIndex }))
+      .sort((left, right) => {
+        const leftOrder = Number.isFinite(left.element.zOrder)
+          ? left.element.zOrder
+          : Number.POSITIVE_INFINITY;
+        const rightOrder = Number.isFinite(right.element.zOrder)
+          ? right.element.zOrder
+          : Number.POSITIVE_INFINITY;
+        return leftOrder - rightOrder || left.elementIndex - right.elementIndex;
+      })
+      .map(({ element }) => element);
     slides.push({
-      backgroundAssetId: `markdstage-background-${slideIndex + 1}`,
+      layoutId: sourceSlide.layoutId,
       ...(sourceSlide.notes ? { notes: sourceSlide.notes } : {}),
-      elements,
+      elements: orderedElements,
     });
   }
-  return { slides, assets };
+  return { masters, layouts, slides, assets };
 }
 
 async function runLayoutInspectionJob(inst, snapshot, browser) {
@@ -585,14 +752,19 @@ export async function exportPptx(
       inst.exportJobs.set(token, job);
 
       const pageUrl = pageUrlFor(inst, { pptx: 1, token });
-      const { model, backgrounds } = await runBrowser(
+      const { model, layoutArtworks, slideFallbackImages } = await runBrowser(
         browser,
         pageUrl,
         profileDir,
         job,
         snapshot.slides.length,
       );
-      const packageModel = await prepareModel(inst, model, backgrounds);
+      const packageModel = await prepareModel(
+        inst,
+        model,
+        layoutArtworks,
+        slideFallbackImages,
+      );
       const buffer = buildPackage({
         title: model.slides[0]?.title || outputBase,
         ...packageModel,
@@ -605,6 +777,8 @@ export async function exportPptx(
         !packageSummary.valid ||
         packageSummary.slideCount !== snapshot.slides.length ||
         packageSummary.notesCount !== expectedNotes ||
+        packageSummary.masterCount !== model.masters.length ||
+        packageSummary.layoutCount !== model.layouts.length ||
         packageSummary.dimensions.widthEmu !== PPTX_DIMENSIONS.widthEmu ||
         packageSummary.dimensions.heightEmu !== PPTX_DIMENSIONS.heightEmu
       ) {
@@ -615,11 +789,19 @@ export async function exportPptx(
       await rename(temporaryOutputPath, outputPath);
       temporaryOutputPath = "";
       const fallbacks = model.slides.flatMap((slide, slideIndex) =>
-        (Array.isArray(slide.fallbacks) ? slide.fallbacks : []).map((fallback) => ({
-          slideIndex,
-          page: slideIndex + 1,
-          ...fallback,
-        })),
+        (Array.isArray(slide.fallbacks) ? slide.fallbacks : []).map((fallback) => {
+          const {
+            artwork: _artwork,
+            captureId: _captureId,
+            zOrder: _zOrder,
+            ...reportedFallback
+          } = fallback;
+          return {
+            slideIndex,
+            page: slideIndex + 1,
+            ...reportedFallback,
+          };
+        }),
       );
       logFor(
         inst,