All files / web/src/app/api/demo/moment-screenshot route.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { NextResponse } from 'next/server'
import type { MomentSnapshot } from '@/db/schema/number-line-postcards'

export const dynamic = 'force-dynamic'

/**
 * POST /api/demo/moment-screenshot
 *
 * Dev-only endpoint that exercises the exact server-side rendering pipeline
 * used by postcard-generate.ts. Accepts an array of MomentSnapshots and
 * returns the rendered PNG (single full-size or 2x2 tiled grid).
 */
export async function POST(req: Request) {
  if (process.env.NODE_ENV !== 'development') {
    return NextResponse.json({ error: 'Dev only' }, { status: 403 })
  }

  const body = (await req.json()) as { snapshots: MomentSnapshot[] }
  const snapshots = body.snapshots
  if (!Array.isArray(snapshots) || snapshots.length === 0) {
    return NextResponse.json({ error: 'snapshots array required' }, { status: 400 })
  }

  const { createServerCanvas } = await import('@/lib/server-canvas')
  const { renderMomentScene } = await import('@/components/toys/number-line/renderMomentScene')

  const momentCount = Math.min(snapshots.length, 4)
  let pngBuffer: Buffer

  if (momentCount === 1) {
    const width = 800
    const height = 600
    const canvas = createServerCanvas(width, height)
    const ctx = canvas.getContext('2d')
    renderMomentScene(ctx as unknown as CanvasRenderingContext2D, snapshots[0], width, height)
    pngBuffer = canvas.toBuffer('image/png')
  } else {
    const tileW = 400
    const tileH = 300
    const canvas = createServerCanvas(800, 600)
    const ctx = canvas.getContext('2d')
    for (let i = 0; i < momentCount; i++) {
      const tileCanvas = createServerCanvas(tileW, tileH)
      const tileCtx = tileCanvas.getContext('2d')
      renderMomentScene(tileCtx as unknown as CanvasRenderingContext2D, snapshots[i], tileW, tileH)
      const col = i % 2
      const row = Math.floor(i / 2)
      ;(ctx as unknown as CanvasRenderingContext2D).drawImage(
        tileCanvas as unknown as CanvasImageSource,
        col * tileW,
        row * tileH
      )
    }
    pngBuffer = canvas.toBuffer('image/png')
  }

  return new NextResponse(new Uint8Array(pngBuffer), {
    headers: {
      'Content-Type': 'image/png',
      'Cache-Control': 'no-store',
    },
  })
}