fix(exporters): paginate sectionless pptx screenshots

Author: Sun-sunshine06

.changeset/polite-pptx-pages.md

@@ -0,0 +1,5 @@
+---
+"@open-codesign/exporters": patch
+---
+
+Paginate PPTX image exports with fallback slide selectors when artifacts do not define section slides.

packages/exporters/src/pptx.test.ts

@@ -1,7 +1,7 @@
 import { existsSync, mkdtempSync, rmSync } from 'node:fs';
 import { tmpdir } from 'node:os';
 import { join } from 'node:path';
-import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
+import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 import { exportPptx, extractSlides } from './pptx';
 
 const pngBytes = Buffer.from(
@@ -17,6 +17,8 @@ const screenshotMock = vi.fn();
 const closeMock = vi.fn();
 const sectionBoundingBoxMock = vi.fn();
 const querySectionsMock = vi.fn();
+const defaultFallbackSlideSelector =
+  '[data-slide], [data-pptx-slide], [data-slide-container], .slide';
 
 vi.mock('puppeteer-core', () => ({
   default: { launch: launchMock },
@@ -30,6 +32,10 @@ let tempDir = '';
 
 beforeAll(() => {
   tempDir = mkdtempSync(join(tmpdir(), 'codesign-pptx-test-'));
+});
+
+beforeEach(() => {
+  vi.clearAllMocks();
   launchMock.mockResolvedValue({
     newPage: newPageMock,
     close: closeMock,
@@ -51,6 +57,12 @@ afterAll(() => {
   rmSync(tempDir, { recursive: true, force: true });
 });
 
+function mockPaginationPageCount(pageCount: number): void {
+  evaluateMock.mockImplementation(async (source: unknown) =>
+    typeof source === 'string' && source.includes('pageCount') ? { pageCount } : undefined,
+  );
+}
+
 describe('extractSlides', () => {
   it('treats each <section> as a slide and pulls the heading + bullets', () => {
     const html = `
@@ -131,6 +143,87 @@ describe('exportPptx', () => {
     );
   });
 
+  it('uses slide-like containers when section elements are absent', async () => {
+    querySectionsMock.mockImplementation(async (selector: string) =>
+      selector === 'section' ? [] : [{ boundingBox: sectionBoundingBoxMock }],
+    );
+    const dest = join(tempDir, 'slide-class-visual.pptx');
+
+    await exportPptx('<div class="slide"><h1>Visual</h1></div>', dest);
+
+    expect(querySectionsMock).toHaveBeenNthCalledWith(1, 'section');
+    expect(querySectionsMock).toHaveBeenNthCalledWith(2, defaultFallbackSlideSelector);
+    expect(screenshotMock).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'png', clip: expect.any(Object) }),
+    );
+  });
+
+  it('uses a caller-provided fallback slide selector', async () => {
+    querySectionsMock.mockImplementation(async (selector: string) =>
+      selector === '[data-slide-container]' ? [{ boundingBox: sectionBoundingBoxMock }] : [],
+    );
+    const dest = join(tempDir, 'custom-slide-selector.pptx');
+
+    await exportPptx('<article data-slide-container><h1>Visual</h1></article>', dest, {
+      slideSelector: '[data-slide-container]',
+    });
+
+    expect(querySectionsMock).toHaveBeenNthCalledWith(1, 'section');
+    expect(querySectionsMock).toHaveBeenNthCalledWith(2, '[data-slide-container]');
+    expect(screenshotMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('paginates sectionless documents into viewport-sized screenshots', async () => {
+    querySectionsMock.mockResolvedValue([]);
+    mockPaginationPageCount(3);
+    const dest = join(tempDir, 'sectionless-visual.pptx');
+
+    await exportPptx('<main><h1>Long artifact</h1></main>', dest);
+
+    expect(screenshotMock).toHaveBeenCalledTimes(3);
+    expect(screenshotMock).toHaveBeenNthCalledWith(1, {
+      type: 'png',
+      clip: { x: 0, y: 0, width: 1280, height: 720 },
+    });
+    expect(screenshotMock).toHaveBeenNthCalledWith(2, {
+      type: 'png',
+      clip: { x: 0, y: 720, width: 1280, height: 720 },
+    });
+    expect(screenshotMock).toHaveBeenNthCalledWith(3, {
+      type: 'png',
+      clip: { x: 0, y: 1440, width: 1280, height: 720 },
+    });
+    expect(screenshotMock).not.toHaveBeenCalledWith(expect.objectContaining({ fullPage: true }));
+  });
+
+  it('keeps short sectionless documents to one viewport-sized screenshot', async () => {
+    querySectionsMock.mockResolvedValue([]);
+    mockPaginationPageCount(1);
+    const dest = join(tempDir, 'short-sectionless-visual.pptx');
+
+    await exportPptx('<main><h1>Short artifact</h1></main>', dest);
+
+    expect(screenshotMock).toHaveBeenCalledTimes(1);
+    expect(screenshotMock).toHaveBeenCalledWith({
+      type: 'png',
+      clip: { x: 0, y: 0, width: 1280, height: 720 },
+    });
+  });
+
+  it('exports an empty sectionless document as one screenshot slide', async () => {
+    querySectionsMock.mockResolvedValue([]);
+    mockPaginationPageCount(1);
+    const dest = join(tempDir, 'empty-sectionless-visual.pptx');
+
+    await exportPptx('', dest);
+
+    expect(screenshotMock).toHaveBeenCalledTimes(1);
+    expect(screenshotMock).toHaveBeenCalledWith({
+      type: 'png',
+      clip: { x: 0, y: 0, width: 1280, height: 720 },
+    });
+  });
+
   it('wraps JSX source before screenshotting PPTX slides', async () => {
     setContentMock.mockClear();
     const dest = join(tempDir, 'jsx-visual.pptx');

packages/exporters/src/pptx.ts

@@ -23,13 +23,19 @@ export interface ExportPptxOptions extends LocalAssetOptions {
   renderTimeoutMs?: number;
   /** Viewport used when rasterizing slides. */
   viewport?: { width: number; height: number };
+  /** CSS selector used to find slide-like containers when no <section> elements exist. */
+  slideSelector?: string;
 }
 
 interface SlideContent {
   title: string;
   bullets: string[];
 }
 
+const PRIMARY_SLIDE_SELECTOR: string = 'section';
+const DEFAULT_FALLBACK_SLIDE_SELECTOR: string =
+  '[data-slide], [data-pptx-slide], [data-slide-container], .slide';
+
 /**
  * Render a design source artifact to PPTX using pptxgenjs.
  *
@@ -129,7 +135,11 @@ async function renderSlideScreenshots(
   const { findSystemChrome } = await import('./chrome-discovery');
   const puppeteer = (await import('puppeteer-core')).default;
 
-  const viewport = opts.viewport ?? { width: 1280, height: 720 };
+  const requestedViewport = opts.viewport ?? { width: 1280, height: 720 };
+  const viewport = {
+    width: Math.max(1, requestedViewport.width),
+    height: Math.max(1, requestedViewport.height),
+  };
   const executablePath = opts.chromePath ?? (await findSystemChrome());
   let html = buildHtmlDocument(artifactSource, { prettify: false });
   html = await inlineLocalAssetsInHtml(html, opts);
@@ -154,11 +164,15 @@ async function renderSlideScreenshots(
     });
     await page.evaluate('document.fonts?.ready ?? Promise.resolve()');
 
-    const sectionHandles = await page.$$('section');
     const screenshots: Buffer[] = [];
-    if (sectionHandles.length > 0) {
-      for (const section of sectionHandles) {
-        const box = await section.boundingBox();
+    let slideHandles = await page.$$(PRIMARY_SLIDE_SELECTOR);
+    if (slideHandles.length === 0) {
+      slideHandles = await page.$$(opts.slideSelector ?? DEFAULT_FALLBACK_SLIDE_SELECTOR);
+    }
+
+    if (slideHandles.length > 0) {
+      for (const slideElement of slideHandles) {
+        const box = await slideElement.boundingBox();
         if (!box || box.width <= 0 || box.height <= 0) continue;
         const image = await page.screenshot({
           type: 'png',
@@ -173,8 +187,40 @@ async function renderSlideScreenshots(
       }
     }
     if (screenshots.length === 0) {
-      const image = await page.screenshot({ type: 'png', fullPage: true });
-      screenshots.push(Buffer.from(image));
+      const pagination = (await page.evaluate(`
+        (() => {
+          const slideHeight = ${JSON.stringify(viewport.height)};
+          const root = document.documentElement;
+          const body = document.body;
+          const scrollHeight = Math.max(
+            root.scrollHeight,
+            root.offsetHeight,
+            root.clientHeight,
+            body ? body.scrollHeight : 0,
+            body ? body.offsetHeight : 0,
+            body ? body.clientHeight : 0
+          );
+          const pageCount = Math.max(1, Math.ceil(scrollHeight / slideHeight));
+          const captureHeight = pageCount * slideHeight;
+          root.style.minHeight = captureHeight + 'px';
+          if (body) body.style.minHeight = captureHeight + 'px';
+          return { pageCount };
+        })()
+      `)) as { pageCount: number };
+      const pageCount = Number.isFinite(pagination.pageCount) ? pagination.pageCount : 1;
+
+      for (let pageIndex = 0; pageIndex < pageCount; pageIndex += 1) {
+        const image = await page.screenshot({
+          type: 'png',
+          clip: {
+            x: 0,
+            y: pageIndex * viewport.height,
+            width: viewport.width,
+            height: viewport.height,
+          },
+        });
+        screenshots.push(Buffer.from(image));
+      }
     }
     return screenshots;
   } finally {