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 when artifacts do not define slide sections.

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(
@@ -30,6 +30,10 @@ let tempDir = '';
 
 beforeAll(() => {
   tempDir = mkdtempSync(join(tmpdir(), 'codesign-pptx-test-'));
+});
+
+beforeEach(() => {
+  vi.clearAllMocks();
   launchMock.mockResolvedValue({
     newPage: newPageMock,
     close: closeMock,
@@ -131,6 +135,46 @@ 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, '[data-slide], [data-pptx-slide], .slide');
+    expect(screenshotMock).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'png', clip: expect.any(Object) }),
+    );
+  });
+
+  it('paginates sectionless documents into viewport-sized screenshots', async () => {
+    querySectionsMock.mockResolvedValue([]);
+    evaluateMock.mockImplementation(async (source: unknown) =>
+      typeof source === 'function' ? { pageCount: 3 } : undefined,
+    );
+    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('wraps JSX source before screenshotting PPTX slides', async () => {
     setContentMock.mockClear();
     const dest = join(tempDir, 'jsx-visual.pptx');

packages/exporters/src/pptx.ts

@@ -30,6 +30,21 @@ interface SlideContent {
   bullets: string[];
 }
 
+interface BrowserLayoutElement {
+  scrollHeight: number;
+  offsetHeight: number;
+  clientHeight: number;
+  style: { minHeight: string };
+}
+
+interface BrowserDocumentShape {
+  documentElement: BrowserLayoutElement;
+  body: BrowserLayoutElement | null;
+}
+
+const PRIMARY_SLIDE_SELECTOR: string = 'section';
+const FALLBACK_SLIDE_SELECTOR: string = '[data-slide], [data-pptx-slide], .slide';
+
 /**
  * Render a design source artifact to PPTX using pptxgenjs.
  *
@@ -154,11 +169,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.$$(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 +192,37 @@ async function renderSlideScreenshots(
       }
     }
     if (screenshots.length === 0) {
-      const image = await page.screenshot({ type: 'png', fullPage: true });
-      screenshots.push(Buffer.from(image));
+      const { pageCount } = await page.evaluate((slideHeight) => {
+        const doc = (globalThis as unknown as { document: BrowserDocumentShape }).document;
+        const root = doc.documentElement;
+        const body = doc.body;
+        const scrollHeight = Math.max(
+          root.scrollHeight,
+          root.offsetHeight,
+          root.clientHeight,
+          body?.scrollHeight ?? 0,
+          body?.offsetHeight ?? 0,
+          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 };
+      }, viewport.height);
+
+      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 {