chore(playground): add visual-test harness

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: tthallos

playground/src/visual-test.tsx

@@ -0,0 +1,119 @@
+/**
+ * Visual regression test harness.
+ *
+ * Renders individual slides via SlideView without animations or transitions,
+ * so Playwright can screenshot each slide for pixel-level comparison.
+ *
+ * URL params:
+ *   ?page=N  — show slide N (1-based), default 1
+ *
+ * Exposes DOM attributes for Playwright:
+ *   #visual-test-root[data-status]      — 'idle' | 'parsing' | 'loading-fonts' | 'ready' | 'error'
+ *   #visual-test-root[data-slide-count] — total slide count
+ *   #visual-test-root[data-current-page]— current page (1-based)
+ *   #slide-container                    — the div wrapping the SVG, screenshot target
+ */
+
+import React, { useState, useCallback, useRef, useEffect } from 'react'
+import { createRoot } from 'react-dom/client'
+import { SlideView, usePresentation, useFonts } from '@pagus-kit/react'
+
+function getPageFromUrl(): number {
+  const params = new URLSearchParams(window.location.search)
+  return Math.max(1, parseInt(params.get('page') ?? '1', 10))
+}
+
+function VisualTestHarness() {
+  const [file, setFile] = useState<File | null>(null)
+  const [page, setPage] = useState(getPageFromUrl)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const { status: parseStatus, presentation, error } = usePresentation(file)
+  const { status: fontStatus, fontSubstitutes } = useFonts(presentation?.fonts ?? undefined, {
+    useGoogleFonts: true,
+    useEmbeddedFonts: true,
+    timeout: 15000,
+  })
+
+  const handleFileChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const f = e.target.files?.[0]
+    if (f) setFile(f)
+  }, [])
+
+  // Listen for URL changes (Playwright navigates by changing ?page=N)
+  useEffect(() => {
+    const onPopState = () => setPage(getPageFromUrl())
+    window.addEventListener('popstate', onPopState)
+    return () => window.removeEventListener('popstate', onPopState)
+  }, [])
+
+  // Expose goToPage globally for Playwright
+  useEffect(() => {
+    ;(window as any).__visualTestGoToPage = (p: number) => {
+      setPage(p)
+      window.history.replaceState({}, '', `?page=${p}`)
+    }
+  }, [])
+
+  let status: string
+  if (error) status = 'error'
+  else if (!file) status = 'idle'
+  else if (parseStatus === 'loading') status = 'parsing'
+  else if (fontStatus === 'loading') status = 'loading-fonts'
+  else if (parseStatus === 'ready' && (fontStatus === 'ready' || fontStatus === 'idle')) status = 'ready'
+  else status = 'idle'
+
+  const slideCount = presentation?.slides.length ?? 0
+  const slideIndex = Math.min(page - 1, slideCount - 1)
+  const slide = presentation?.slides[slideIndex]
+
+  return (
+    <div
+      id="visual-test-root"
+      data-status={status}
+      data-slide-count={slideCount}
+      data-current-page={slideIndex + 1}
+      style={{ margin: 0, padding: 0, background: '#f0f0f0' }}
+    >
+      {/* File upload — hidden once file is loaded */}
+      {!file && (
+        <div style={{ padding: 20, textAlign: 'center' }}>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept=".pptx"
+            onChange={handleFileChange}
+            data-testid="file-input"
+          />
+        </div>
+      )}
+
+      {/* Status display */}
+      {status === 'parsing' && <div style={{ padding: 20, textAlign: 'center', color: '#999' }}>Parsing...</div>}
+      {status === 'loading-fonts' && <div style={{ padding: 20, textAlign: 'center', color: '#999' }}>Loading fonts...</div>}
+      {status === 'error' && <div style={{ padding: 20, textAlign: 'center', color: 'red' }}>Error: {String(error)}</div>}
+
+      {/* Slide rendering — no animations, no transitions */}
+      {status === 'ready' && slide && presentation && (
+        <div
+          id="slide-container"
+          style={{
+            display: 'inline-block',
+            background: '#fff',
+          }}
+        >
+          <SlideView
+            slide={slide}
+            slideSize={presentation.slideSize}
+            scale={1}
+            fontSubstitutes={fontSubstitutes}
+            /* No hiddenShapeIds — all shapes visible */
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+const root = createRoot(document.getElementById('app')!)
+root.render(<VisualTestHarness />)

playground/visual-test.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pagus Visual Regression Test</title>
+    <style>
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      body { background: #f0f0f0; }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/visual-test.tsx"></script>
+  </body>
+</html>