@markdstage/markdstage 2.6.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;}
@@ -547,8 +553,22 @@ body.presenter-view-mode .layout-warning{display:none;}
      align-items:center;justify-content:center;border-radius:6px;
      font-size:.82em;font-weight:700;font-variant-numeric:tabular-nums;
      color:var(--muted);background:var(--code);border:1px solid var(--border);}
+.overview-kind{flex:0 0 auto;padding:.18em .48em;border-radius:999px;
+     color:var(--accent-strong);background:var(--surface);border:1px solid var(--accent);
+     font-size:.66em;font-weight:750;letter-spacing:.06em;text-transform:uppercase;}
 .overview-label{flex:1 1 auto;font-size:.96em;line-height:1.35;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.overview-item-title{margin-bottom:.45em;}
+.overview-item-title .overview-link{background:color-mix(in srgb,var(--accent-soft) 74%,transparent);
+     border:1px solid color-mix(in srgb,var(--accent) 48%,var(--border));}
+.overview-item-title .overview-label{color:var(--fg);font-weight:700;}
+.overview-item-section{margin-top:.65em;padding-top:.55em;border-top:1px solid var(--border);}
+.overview-item-section .overview-link{padding-block:.65em;background:var(--accent-soft);
+     border-left:4px solid var(--accent);}
+.overview-item-section .overview-num{color:var(--fg);border-color:var(--accent);}
+.overview-item-section .overview-label{color:var(--fg);font-weight:700;}
+.overview-item-section-child .overview-link{width:calc(100% - 1.2em);margin-left:1.2em;
+     border-left:1px solid color-mix(in srgb,var(--accent) 42%,var(--border));border-radius:0 8px 8px 0;}
 .overview-item.current .overview-link{background:var(--accent-soft);}
 .overview-item.current .overview-num{color:var(--fg);background:var(--accent);
      border-color:var(--accent);}
@@ -642,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;
@@ -660,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

@@ -6,7 +6,7 @@
 // because the Extension is distributed as a folder ZIP.
 
 import { existsSync } from "node:fs";
-import { readFile, open, rm, stat } from "node:fs/promises";
+import { readFile, open, rm, stat, writeFile } from "node:fs/promises";
 import { join } from "node:path";
 import { execFileSync, spawn } from "node:child_process";
 
@@ -173,84 +173,6 @@ export function delay(milliseconds) {
   return new Promise((resolvePromise) => setTimeout(resolvePromise, milliseconds));
 }
 
-/**
- * Run a headless browser once with `--print-to-pdf`.
- *
- * ⚠️ **`pageUrl` must include `?print=1&token=...` (#12).**
- *
- * `--print-to-pdf` completes only when the page becomes idle. In renderer `init()`,
- * only print mode returns early. Normal and presenter views keep an unclosed SSE
- * (`new EventSource("./events")`) and a two-second `setInterval` running.
- * Passing a URL without `?print=1` therefore means **the browser never exits**.
- *
- * Observed results, using Chrome arguments byte-for-byte identical to this function:
- *
- * | URL                        | Result                                  |
- * | -------------------------- | --------------------------------------- |
- * | `/?print=1&token=<valid>`  | exit 0 @ 2.4s (valid PDF)               |
- * | `/?print=1&token=` (empty) | exit 0 @ 1.9s (blank; renderer reports failure) |
- * | `/` (normal view)          | **HANG** (still running after 120 seconds) |
- * | `/?present=1`              | **HANG**                                |
- * | `/nope-404` (no renderer)  | exit 0 @ 3.0s                           |
- *
- * ⚠️ **`--virtual-time-budget` is effectively ignored by `--headless=new`.**
- * The `--virtual-time-budget=12000` argument below does not stop this hang.
- * Adding `--timeout=8000` is also ineffective, as verified empirically.
- * The argument is harmless and remains in place, but **do not treat it as a
- * wall-clock timeout**. Only Node's `PDF_RENDER_TIMEOUT_MS` and
- * `terminateProcessTree` enforce a limit, and failure may take up to 60 seconds.
- */
-export async function runHeadlessBrowser(browser, args, failureLabel) {
-  await new Promise((resolvePromise, rejectPromise) => {
-    const child = spawn(browser, args, {
-      detached: process.platform !== "win32",
-      windowsHide: true,
-      stdio: ["ignore", "pipe", "pipe"],
-    });
-    let diagnostics = "";
-    let settled = false;
-    let timedOut = false;
-    const appendDiagnostics = (chunk) => {
-      diagnostics = `${diagnostics}${chunk.toString()}`.slice(-12_000);
-    };
-    child.stdout.on("data", appendDiagnostics);
-    child.stderr.on("data", appendDiagnostics);
-
-    const settle = (error) => {
-      if (settled) return;
-      settled = true;
-      clearTimeout(timer);
-      if (error) rejectPromise(error);
-      else resolvePromise();
-    };
-    const timer = setTimeout(async () => {
-      if (settled) return;
-      timedOut = true;
-      await terminateProcessTree(child);
-      settle(new Error(`${failureLabel} timed out after ${PDF_RENDER_TIMEOUT_MS / 1000}s.`));
-    }, PDF_RENDER_TIMEOUT_MS);
-
-    child.once("error", (error) => {
-      if (!timedOut) settle(error);
-    });
-    child.once("exit", (code, signal) => {
-      if (timedOut) return;
-      if (code === 0) {
-        settle();
-        return;
-      }
-      const detail = diagnostics.trim();
-      settle(
-        new Error(
-          `${failureLabel} failed (${signal ? `signal ${signal}` : `exit ${code}`})${
-            detail ? `: ${detail}` : "."
-          }`,
-        ),
-      );
-    });
-  });
-}
-
 function withSandboxFallback(args) {
   if (
     process.platform !== "win32" &&
@@ -262,35 +184,38 @@ function withSandboxFallback(args) {
   return args;
 }
 
-export async function runPdfBrowser(browser, pageUrl, outputPath, profileDir) {
-  // Enforce the contract at runtime. Otherwise it silently waits 60 seconds
-  // before timing out, obscuring the cause; fail immediately with an explanation.
+export async function runPdfBrowser(browser, pageUrl, outputPath, profileDir, job) {
   if (new URL(pageUrl).searchParams.get("print") !== "1") {
     throw new Error(
-      `Refusing to run --print-to-pdf against a non-print URL (${pageUrl}): only ?print=1 stops the renderer's SSE and polling loops, so any other page hangs the browser forever.`,
+      `Refusing to render PDF from a non-print URL (${pageUrl}).`,
     );
   }
-  const args = withSandboxFallback([
-    "--headless=new",
-    "--disable-gpu",
-    "--disable-background-networking",
-    "--disable-component-update",
-    "--disable-default-apps",
-    "--disable-extensions",
-    "--force-color-profile=srgb",
-    "--hide-scrollbars",
-    "--no-first-run",
-    "--no-pdf-header-footer",
-    "--print-to-pdf-no-header",
-    "--run-all-compositor-stages-before-draw",
-    // Ineffective (#12): --headless=new ignores it. See the JSDoc above.
-    // The actual safeguards are PDF_RENDER_TIMEOUT_MS + terminateProcessTree.
-    "--virtual-time-budget=12000",
-    `--user-data-dir=${profileDir}`,
-    `--print-to-pdf=${outputPath}`,
-    pageUrl,
-  ]);
-  await runHeadlessBrowser(browser, args, "Browser PDF rendering");
+  if (!job || typeof job !== "object") {
+    throw new Error("PDF rendering requires an output job.");
+  }
+
+  const { cdp, child } = await openCdpOutputPage(browser, pageUrl, profileDir, job);
+  try {
+    // The renderer reports ready only after Mermaid, images, fonts, and layout
+    // have settled. Give Chromium two compositor frames before printing.
+    await cdp.send("Runtime.evaluate", {
+      expression:
+        "new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)))",
+      awaitPromise: true,
+    });
+    const pdf = await cdp.send("Page.printToPDF", {
+      displayHeaderFooter: false,
+      printBackground: true,
+      preferCSSPageSize: true,
+      transferMode: "ReturnAsBase64",
+    });
+    if (typeof pdf.data !== "string" || pdf.data.length === 0) {
+      throw new Error("Chromium DevTools did not return PDF data.");
+    }
+    await writeFile(outputPath, Buffer.from(pdf.data, "base64"));
+  } finally {
+    await closeCdpOutputPage(cdp, child);
+  }
 }
 
 async function waitForDevToolsPort(profileDir, child, diagnostics) {
@@ -528,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.");
     }
 
@@ -538,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}.`);
+      }
+      layoutArtworks.push(Buffer.from(screenshot.data, "base64"));
+    }
+
+    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"),
+        });
       }
-      backgrounds.push(Buffer.from(screenshot.data, "base64"));
+      slideFallbackImages.push(images);
     }
-    return { model, backgrounds };
+    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);
   }